chore: refactor e2e tests to playwright

.cspell.json

@@ -65,6 +65,7 @@
     "swiftshader",
     "hoge",
     "subsubcomain",
+    "commitlint",
     "noselect"
   ],
   "ignorePaths": [
@@ -77,6 +78,7 @@
     "package-lock.json",
     "node_modules",
     "coverage",
-    "*.log"
+    "*.log",
+    "*-snapshots"
   ]
 }

.eslintignore

@@ -6,3 +6,6 @@ node_modules
 examples/**/main.js
 examples/client/trusted-types-overlay/app.js
 test/fixtures/reload-config/foo.js
+
+# ignore tests files
+**/*.ignore.*

.github/workflows/nodejs.yml

@@ -12,6 +12,18 @@ on:
       - next
       - v4
 
+  workflow_call:
+    inputs:
+      update-snapshots:
+        description: "Update snapshots?"
+        type: boolean
+
+  workflow_dispatch:
+    inputs:
+      update-snapshots:
+        description: "Update snapshots?"
+        type: boolean
+
 permissions:
   contents: read
 
@@ -67,6 +79,7 @@ jobs:
     name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}, Webpack ${{ matrix.webpack-version }} (${{ matrix.shard }})
 
     strategy:
+      fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [18.x, 20.x, 22.x]
@@ -97,12 +110,6 @@ jobs:
           node ./scripts/prepare-test-for-old-node.js
         if: matrix.node-version == '18.x'
 
-      - name: Setup firefox
-        if: matrix.os != 'windows-latest'
-        uses: browser-actions/setup-firefox@latest
-        with:
-          firefox-version: latest
-
       - name: Link webpack-dev-server
         run: |
           cp -R client tmp-client
@@ -119,6 +126,24 @@ jobs:
         run: npm run test:coverage -- --ci --shard=${{ matrix.shard }}
         if: matrix.node-version != '18.x'
 
+      - name: Install Playwright browsers and dependencies
+        run: npx playwright install --with-deps
+
+      - name: Set up cache
+        id: cache
+        uses: actions/cache@v4
+        with:
+          key: cache/${{github.repository}}/${{github.ref}}
+          restore-keys: cache/${{github.repository}}/refs/heads/master
+          path: .test/**
+
+      - name: Initialize snapshots
+        if: ${{steps.cache.outputs.cache-hit != 'true' || inputs.update-snapshots == 'true'}}
+        run: npx playwright test --update-snapshots
+
+      - name: Run E2E tests for webpack version ${{ matrix.webpack-version }}
+        run: npm run test:e2e
+
       - name: Submit coverage data to codecov
         uses: codecov/codecov-action@v4
         with:

.gitignore

@@ -21,3 +21,7 @@ test/fixtures/watch-files-config/public/assets/non-exist.txt
 test/fixtures/reload-config/main.css
 test/fixtures/reload-config-2/main.css
 !/test/fixtures/static-config/public/node_modules
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

jest.config.js

@@ -10,7 +10,10 @@ module.exports = {
     "<rootDir>/test/",
     "<rootDir>/client/",
   ],
-  testPathIgnorePatterns: ["<rootDir>/bin/this/process-arguments.js"],
+  testPathIgnorePatterns: [
+    "<rootDir>/bin/this/process-arguments.js",
+    "<rootDir>/test/e2e",
+  ],
   snapshotResolver: "<rootDir>/test/helpers/snapshotResolver.js",
   setupFilesAfterEnv: ["<rootDir>/scripts/setupTest.js"],
   globalSetup: "<rootDir>/scripts/globalSetupTest.js",

package.json

@@ -41,6 +41,7 @@
     "test:coverage": "npm run test:only -- --coverage",
     "test:watch": "npm run test:coverage --watch",
     "test": "npm run test:coverage",
+    "test:e2e": "npx playwright test",
     "pretest": "npm run lint",
     "prepare": "husky && npm run build",
     "release": "standard-version"
@@ -86,6 +87,7 @@
     "@babel/runtime": "^7.22.5",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
+    "@playwright/test": "^1.44.0",
     "@types/compression": "^1.7.2",
     "@types/default-gateway": "^3.0.1",
     "@types/node": "^20.11.16",
@@ -110,6 +112,7 @@
     "husky": "^9.0.10",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "jest-mock": "^29.7.0",
     "klona": "^2.0.4",
     "less": "^4.1.1",
     "less-loader": "^12.1.0",

playwright.config.js

@@ -0,0 +1,28 @@
+"use strict";
+
+module.exports = {
+  testIgnore: "**/*.ignore.*",
+  testDir: "./test/e2e",
+  outputDir: ".test/spec/output",
+  snapshotPathTemplate:
+    ".test/spec/snaps/{projectName}/{testFilePath}/{arg}{ext}",
+  fullyParallel: false,
+  forbidOnly: process.env.CI !== "true",
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: process.env.CI ? "github" : "list",
+  use: {
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        browserName: "chromium",
+        launchOptions: {
+          args: ["--ignore-certificate-errors"],
+        },
+      },
+    },
+  ],
+};