screenshots: rewrite and enable linting

Author: incognitojam

src/ci/screenshots.cjs src/ci/screenshots.ts

@@ -1,6 +1,5 @@
-/* eslint-disable */
-const fs = require('node:fs')
-const { chromium, devices } = require('playwright')
+import fs from 'node:fs'
+import { chromium, devices, type BrowserContext, type BrowserContextOptions } from 'playwright'
 
 const baseUrl = process.argv[2]
 const outDir = process.argv[3] || 'screenshots'
@@ -11,29 +10,29 @@ const endpoints = {
   SettingsActivity: '1d3dc3e03047b0c7/settings',
 }
 
-async function takeScreenshots(deviceType, context) {
+async function takeScreenshots(deviceType: string, context: BrowserContext) {
   const page = await context.newPage()
   for (const [route, path] of Object.entries(endpoints)) {
     await page.goto(`${baseUrl}/${path}`, { waitUntil: 'networkidle' })
-    await page.waitForTimeout(2000)
+    await page.waitForTimeout(500)
     await page.screenshot({ path: `${outDir}/${route}-${deviceType}.playwright.png` })
     console.log(`${route}-${deviceType}.playwright.png`)
 
     if (route === 'Login') {
-      await page.click(`button:has-text('Try the demo')`, { waitUntil: 'networkidle' })
-      await page.waitForTimeout(1000)
+      await page.click('button:has-text(\'Try the demo\')')
+      await page.waitForLoadState('networkidle')
     }
   }
   await page.close()
 }
 
 async function main() {
-  let executablePath = '/usr/bin/chromium'
+  let executablePath: string | undefined = '/usr/bin/chromium'
   if (!fs.existsSync(executablePath)) executablePath = undefined
 
   const browser = await chromium.launch({ executablePath, headless: true })
 
-  const contexts = [
+  const contexts: [string, BrowserContextOptions][] = [
     ['mobile', devices['iPhone 13']],
     ['desktop', { viewport: { width: 1920, height: 1080 }}],
   ]