test: fix test in ci

.github/workflows/test.yaml

@@ -3,6 +3,10 @@ on: [push]
 jobs:
   test:
     runs-on: ubuntu-latest
+    environment:
+      name: test
+    env:
+      VITE_ONEDRIVE_CLIENT_ID: ${{ vars.VITE_ONEDRIVE_CLIENT_ID }}
     steps:
       - uses: actions/checkout@v4
 
@@ -18,10 +22,11 @@ jobs:
 
       - uses: actions/cache@v3
         with:
-          path: tests/fixtures
-          key: tests/fixtures
+          path: tests/fixtures/roms
+          key: tests/fixtures/roms
 
       - run: pnpm lint
-      - run: pnpm playwright install
+      - run: env
+      - run: pnpm playwright install chromium
       - run: pnpm prepare-test
       - run: pnpm t

package.json

@@ -4,11 +4,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
-    "preview": "vite build && vite preview",
+    "dev-test": "playwright test -c tests/e2e --headed --ui",
+    "dev": "vite",
     "lint": "eslint src",
     "prepare-test": "node ./scripts/prepare-test.js",
+    "preview": "vite build && vite preview",
     "test": "playwright test -c tests/e2e"
   },
   "dependencies": {

tests/e2e/homepage/homepage.spec.ts

@@ -12,21 +12,20 @@ function setMockLocalStorage() {
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/')
-  await page.bringToFront()
 
   const dialog = page.getByRole('dialog')
 
+  const button = page.getByTestId('select-onedrive-directory')
   if (isUpdatingHar) {
     await page.routeFromHAR(harPath, { url: harUrlPattern, update: true, updateMode: 'minimal' })
-    const button = page.getByTestId('select-onedrive-directory')
     await button.click()
     await dialog.getByRole('link').click()
   } else {
     await page.evaluate(setMockLocalStorage)
     await page.routeFromHAR(harPath, { url: harUrlPattern })
-    const button = page.getByTestId('select-onedrive-directory')
     await button.click()
   }
+
   const node = dialog.getByTestId('directory-tree-node')
   await node.filter({ hasText: 'games' }).click()
   await node.filter({ hasText: 'retro-game-roms-test' }).getByRole('button').click()

tests/e2e/playwright.config.ts

@@ -1,16 +1,13 @@
-import process from 'node:process'
 import { defineConfig } from '@playwright/test'
 
 export default defineConfig({
   testDir: '.',
   snapshotDir: 'snapshots',
   snapshotPathTemplate: '{snapshotDir}/{testFilePath}/{testName}-{arg}{ext}',
-  timeout: 5 * 60 * 1000,
   use: {
     baseURL: 'http://localhost:5173',
     trace: 'on-first-retry',
-    headless: Boolean(process.env.CI),
   },
-  webServer: { command: 'pnpm dev', url: 'http://localhost:5173', reuseExistingServer: true },
+  webServer: { command: 'pnpm dev', url: 'http://localhost:5173', reuseExistingServer: !process.env.CI },
   expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.05 } },
 })