test: use Docker for playwright tests

.github/workflows/playwright.yml

@@ -7,13 +7,10 @@ on:
   workflow_dispatch:
 jobs:
   test:
-    timeout-minutes: 10
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
       - uses: pnpm/action-setup@v2
         with:
           version: 8
@@ -21,10 +18,8 @@ jobs:
         run: pnpm install --frozen-lockfile
       - name: Build app
         run: pnpm build
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
       - name: Run Playwright tests
-        run: pnpm exec playwright test
+        run: pnpm test
       - uses: actions/upload-artifact@v3
         if: always()
         with:

compose.test.yaml

@@ -0,0 +1,9 @@
+services:
+  playwright:
+    image: mcr.microsoft.com/playwright:v1.39.0-jammy
+    working_dir: /work
+    volumes:
+      - .:/work
+    network_mode: host
+    environment:
+      - CI

package.json

@@ -10,8 +10,8 @@
     "build": "next build",
     "analyze": "ANALYZE=true next build",
     "start": "serve out",
-    "test": "playwright test",
-    "test:update": "playwright test --update-snapshots",
+    "test": "docker compose -f compose.test.yaml run --rm playwright npx playwright test",
+    "test:update": "pnpm test -- --update-snapshots",
     "test:report": "playwright show-report",
     "deploy": "firebase deploy --project devtoysweb",
     "check": "pnpm typecheck && pnpm lint && pnpm format:check",

playwright.config.ts

@@ -51,7 +51,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: "pnpm start",
+    command: "npm run start",
     url: "http://127.0.0.1:3000",
     reuseExistingServer: !process.env.CI,
   },

tests/app/page.spec.ts

@@ -1,10 +1,6 @@
 import { expect, test } from "@playwright/test";
 
-// avoid VRT on CI because of difference between CI and local test env
-// we can do VRT on CI if dockerize local test env
-if (!process.env.CI) {
-  test("VRT", async ({ page }) => {
-    await page.goto("/");
-    await expect(page).toHaveScreenshot();
-  });
-}
+test("VRT", async ({ page }) => {
+  await page.goto("/");
+  await expect(page).toHaveScreenshot();
+});