Tests against Firefox

Author: aaronshaf

.github/workflows/playwright.yml

@@ -10,13 +10,14 @@ on:
 
 jobs:
   test-linux:
-    name: Playwright tests on Linux (headless=${{ matrix.headless }})
+    name: Playwright tests on Linux (headless=${{ matrix.headless }}, browser=${{ matrix.browser }})
     runs-on: ubuntu-22.04
 
     strategy:
       fail-fast: false
       matrix:
         headless: [true]
+        browser: [chromium, firefox]
 
     steps:
       # 1. Checkout the repository
@@ -50,9 +51,9 @@ jobs:
         uses: actions/cache@v3
         with:
           path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package.json', '**/playwright.config.*') }}
+          key: ${{ runner.os }}-playwright-${{ matrix.browser }}-${{ hashFiles('**/package.json', '**/playwright.config.*') }}
           restore-keys: |
-            ${{ runner.os }}-playwright-
+            ${{ runner.os }}-playwright-${{ matrix.browser }}-
 
       # 6. Install dependencies
       - name: Install dependencies
@@ -86,7 +87,7 @@ jobs:
 
       # 11. Install Playwright browsers
       - name: Install Playwright browsers
-        run: pnpm --filter idb-cache-app exec playwright install
+        run: pnpm --filter idb-cache-app exec playwright install ${{ matrix.browser }}
 
       # 12. Serve the idb-cache-app
       - name: Serve idb-cache-app
@@ -107,14 +108,6 @@ jobs:
           echo "Server failed to start in time."
           exit 1
 
-      # 14. Run Playwright tests in headless mode
-      - name: Run Playwright tests (Headless)
-        if: ${{ matrix.headless == true }}
-        run: pnpm --filter idb-cache-app test
-
-      # 15. Run Playwright tests in headful mode on Linux
-      - name: Run Playwright tests (Headful)
-        if: ${{ matrix.headless == false }}
-        run: |
-          export HEADFUL=true
-          xvfb-run --auto-servernum -- pnpm --filter idb-cache-app test
+      # 14. Run Playwright tests
+      - name: Run Playwright tests
+        run: pnpm --filter idb-cache-app test -- --project=${{ matrix.browser }} --headless

packages/idb-cache-app/package.json

@@ -26,6 +26,7 @@
 		"@playwright/test": "^1.48.2",
 		"@rsbuild/core": "^1.0.19",
 		"@rsbuild/plugin-react": "^1.0.6",
+		"@types/node": "^22.9.0",
 		"@types/random-seed": "^0.3.5",
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",

packages/idb-cache-app/playwright.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { defineConfig, devices } from "@playwright/test";
 
 /**
@@ -39,15 +40,15 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
 
-    // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
-    // },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
 
-    // {
-    //   name: 'webkit',
-    //   use: { ...devices['Desktop Safari'] },
-    // },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
 
     /* Test against mobile viewports. */
     // {

packages/idb-cache-app/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "types": ["node"],
     "lib": ["DOM", "ES2020"],
     "jsx": "react-jsx",
     "target": "ES2020",