Add playwright script to take screenshots (commaai#37)

package.json

@@ -35,6 +35,7 @@
     "globals": "^15.4.0",
     "husky": "^9.0.11",
     "jsdom": "^24.1.0",
+    "playwright": "^1.44.1",
     "postcss": "^8.4.38",
     "solid-devtools": "^0.30.1",
     "tailwindcss": "^3.4.4",

src/ci/screenshots.cjs

@@ -0,0 +1,34 @@
+/* eslint-disable */
+const { webkit, devices } = require('playwright');
+
+const base_url = process.argv[2];
+const endpoints = {
+  Login: 'login',
+  RouteList: '1d3dc3e03047b0c7',
+  RouteActivity: '1d3dc3e03047b0c7/000000dd--455f14369d',
+};
+
+async function takeScreenshots(deviceType, context) {
+  let page = await context.newPage()
+  await page.goto(`${base_url}`)
+  await page.click(`button:has-text('Try the demo')`)
+  for (const endpoint in endpoints) {
+    await page.goto(`${base_url}/${endpoints[endpoint]}`)
+    await page.waitForTimeout(2000)
+    await page.screenshot({path: `screenshots/${endpoint}-${deviceType}.png`})
+  }
+  await page.close()
+}
+
+(async () => {
+  const mobile_browser = await webkit.launch()
+  const iphone_13 = devices['iPhone 13']
+  const mobile_context = await mobile_browser.newContext(iphone_13)
+  await takeScreenshots('mobile', mobile_context)
+  await mobile_browser.close()
+
+  const desktop_browser = await webkit.launch()
+  const desktop_context = await desktop_browser.newContext({viewport: { width: 1920, height: 1080 }})
+  await takeScreenshots('desktop', desktop_context)
+  await desktop_browser.close()
+})()