Add CI job to run Playwright tests of main browser families against w…

…ebworker QUnit test page.

.github/workflows/ci.yml

@@ -29,14 +29,20 @@ jobs:
       run: npm install --no-package-lock
     - name: Run All Validations
       run: npm run ci
-    - name: Install Dependencies for Web Worker
-      run: npm run webworker-install
-    - name: Run Webpack for Web Worker
-      run: npm run webworker
 
-  install-global:
+  run-tests-webworker:
     runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+    - run: npm install --no-package-lock
+    - run: npm run webworker-install
+    - run: npm run webworker
+    - run: npm run playwright-install-bare
+    - run: npm run playwright-test-docker
 
+  install-global:
+    runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
     - name: Package markdownlint-cli2

package.json

@@ -34,6 +34,10 @@
     "lint": "eslint --max-warnings 0",
     "lint-dockerfile": "docker run --rm -i hadolint/hadolint:latest-alpine < docker/Dockerfile",
     "lint-watch": "git ls-files | entr npm run lint",
+    "playwright-install-bare": "npm run playwright-install-npm && playwright install",
+    "playwright-install-npm": "npm install --no-save playwright@1.46.1",
+    "playwright-test": "playwright test --config ./webworker/playwright.config.mjs",
+    "playwright-test-docker": "docker run --rm --volume $PWD:/home/workdir --workdir /home/workdir --ipc=host mcr.microsoft.com/playwright:latest npm run playwright-test",
     "schema": "cpy ./node_modules/markdownlint/schema/markdownlint-config-schema.json ./schema --flat",
     "test": "ava --timeout=1m test/append-to-array-test.js test/fs-mock-test.js test/fs-virtual-test.js test/markdownlint-cli2-test.js test/markdownlint-cli2-test-exec.js test/markdownlint-cli2-test-exports.js test/markdownlint-cli2-test-fs.js test/markdownlint-cli2-test-main.js test/merge-options-test.js test/resolve-and-require-test.js",
     "test-cover": "c8 --100 npm test",
@@ -78,6 +82,7 @@
   "devDependencies": {
     "@eslint/js": "9.9.1",
     "@iktakahiro/markdown-it-katex": "4.0.1",
+    "@playwright/test": "1.46.1",
     "@stylistic/eslint-plugin": "2.7.2",
     "ajv": "8.17.1",
     "ava": "6.1.3",

webworker/playwright.config.mjs

@@ -0,0 +1,28 @@
+// @ts-check
+
+import { defineConfig, devices } from "@playwright/test";
+import { testPort, testUrl } from "./playwright.shared.mjs";
+
+export default defineConfig({
+  "testDir": ".",
+  "projects": [
+    {
+      "name": "Pixel 7 (chromium)",
+      "use": { ...devices["Pixel 7"] }
+    },
+    {
+      "name": "Desktop Firefox (firefox)",
+      "use": { ...devices["Desktop Firefox"] }
+    },
+    {
+      "name": "iPhone 13 (webkit)",
+      "use": { ...devices["iPhone 13"] }
+    }
+  ],
+  "webServer": [
+    {
+      "command": `npm exec --yes -- serve --listen ${testPort}`,
+      "url": testUrl
+    }
+  ]
+});

webworker/playwright.shared.mjs

@@ -0,0 +1,5 @@
+// @ts-check
+
+const domain = "localhost";
+export const testPort = 3000;
+export const testUrl = `http://${domain}:${testPort}/`;

webworker/playwright.spec.mjs

@@ -0,0 +1,17 @@
+// @ts-check
+
+import { expect, test } from "@playwright/test";
+import { testUrl } from "./playwright.shared.mjs";
+
+const bannerId = "qunit-banner";
+const failClass = "qunit-fail";
+const passClass = "qunit-pass";
+const failSelector = `#${bannerId}.${failClass}`;
+const passSelector = `#${bannerId}.${passClass}`;
+
+test("Test site QUnit", async ({ page }) => {
+  await page.goto(testUrl);
+  const bannerLocator = page.locator(`${passSelector}, ${failSelector}`);
+  await bannerLocator.waitFor();
+  await expect(bannerLocator).toHaveClass(passClass, { "timeout": 1 });
+});