diff --git a/package.json b/package.json index adc2ff44d..5a6b19e17 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "check:webui-dependency": "node scripts/check-webui-dependency.mjs", "test:webui": "node scripts/run-vitest-suite.mjs webui", "test:webui-package": "node scripts/verify-webui-package.mjs", - "test:webui-browser": "playwright install chromium && playwright test packages/webui/test/browser", + "test:webui-browser": "playwright install --with-deps chromium && playwright test packages/webui/test/browser", "typecheck:webui": "pnpm --filter @mavis/webui typecheck:server && pnpm --filter @mavis/webui typecheck:client && pnpm --filter @mavis/webui typecheck:test", "check:source": "node scripts/source-inventory.mjs", "check:plugin": "node tools/plugins/validate-plugin.mjs", diff --git a/packages/webui/docs/verification/browser-suite.md b/packages/webui/docs/verification/browser-suite.md index 865583c36..2c2ee1021 100644 --- a/packages/webui/docs/verification/browser-suite.md +++ b/packages/webui/docs/verification/browser-suite.md @@ -4,7 +4,9 @@ `styles.css` and files under `assets/` — in a real browser. The deterministic harness server serves those built assets from the client output directory and refuses paths outside that directory. Run `pnpm build:webui` first; the script installs the -lockfile-pinned Chromium revision when it is missing. The deterministic cases are evidence level 4 in +lockfile-pinned Chromium revision when it is missing, and on Linux also installs Chromium's system +dependencies, which include the CJK fonts the Chinese UI renders with. The deterministic cases are +evidence level 4 in [`gates.md`](gates.md): the built client and its transport wiring are real, the server behind them is not in the deterministic fixture cases. `native-runtime.spec.mjs` additionally boots the real assembly, loopback service and native PTY bridge in a separate process with an isolated, @@ -99,10 +101,22 @@ pnpm build:webui pnpm test:webui-browser ``` +The screenshots are only comparable within one font environment. The gate installs Chromium's +Linux system dependencies, which include the CJK fonts the Chinese surfaces need; on a runner +without them the browser has no glyph to draw for Chinese text and renders tofu boxes instead. +The committed baselines therefore record real Chinese glyphs, and a reviewer reading a diff can +read the Chinese in it. The same applies in reverse: regenerating the baselines anywhere that +does not install those fonts produces boxes, and the comparison against the committed baselines +fails. Treat a font change on the runner as a baseline change, not as a rendering difference to +be accepted. + To deliberately regenerate only these baselines, use `pnpm exec playwright test packages/webui/test/browser/visual-baselines.spec.mjs --update-snapshots` on Linux CI Chromium, inspect every resulting image, then run the same command without -`--update-snapshots` to compare. A passing fixture screenshot proves the built client's rendered +`--update-snapshots` to compare. Regenerate on a Linux environment that has the gate's fonts +installed — `pnpm exec playwright install --with-deps chromium` before the run — so the new +baselines carry the same glyphs the committed ones do. A passing fixture screenshot proves the +built client's rendered state under the in-page deterministic transport; it does not prove the production service or runtime path. Those boundaries require the integration suites described above. diff --git a/packages/webui/test/browser/README.md b/packages/webui/test/browser/README.md index c6c1f68a8..8baab7d8a 100644 --- a/packages/webui/test/browser/README.md +++ b/packages/webui/test/browser/README.md @@ -5,7 +5,7 @@ in-page transport). Run the directory, not a hand-kept list: Playwright collects ```sh pnpm build:webui # the suite drives the built client -pnpm test:webui-browser # installs the pinned Chromium revision when missing +pnpm test:webui-browser # installs the pinned Chromium revision and, on Linux, its system dependencies ``` How the fixture works, what the suite proves and what it does not, and which environment variables diff --git a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Agent-add-form-is-centered-fields-are-aligned-and-backdrop-dismissal-works-1-linux.png b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Agent-add-form-is-centered-fields-are-aligned-and-backdrop-dismissal-works-1-linux.png index a187c9db7..ebf63c4f7 100644 Binary files a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Agent-add-form-is-centered-fields-are-aligned-and-backdrop-dismissal-works-1-linux.png and b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Agent-add-form-is-centered-fields-are-aligned-and-backdrop-dismissal-works-1-linux.png differ diff --git a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Git-plugin-import-form-is-an-accessible-viewport-overlay-and-previews-local-fixture-data-1-linux.png b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Git-plugin-import-form-is-an-accessible-viewport-overlay-and-previews-local-fixture-data-1-linux.png index ee7b17801..242af3725 100644 Binary files a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Git-plugin-import-form-is-an-accessible-viewport-overlay-and-previews-local-fixture-data-1-linux.png and b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Git-plugin-import-form-is-an-accessible-viewport-overlay-and-previews-local-fixture-data-1-linux.png differ diff --git a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/MCP-add-form-validates-inputs-switches-transport-and-sends-advanced-HTTP-config-1-linux.png b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/MCP-add-form-validates-inputs-switches-transport-and-sends-advanced-HTTP-config-1-linux.png index 3a2393dd5..0b506798c 100644 Binary files a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/MCP-add-form-validates-inputs-switches-transport-and-sends-advanced-HTTP-config-1-linux.png and b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/MCP-add-form-validates-inputs-switches-transport-and-sends-advanced-HTTP-config-1-linux.png differ diff --git a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Skill-add-form-is-centered-usable-and-submits-through-plugin-management-1-linux.png b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Skill-add-form-is-centered-usable-and-submits-through-plugin-management-1-linux.png index e726b67fd..b24836e13 100644 Binary files a/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Skill-add-form-is-centered-usable-and-submits-through-plugin-management-1-linux.png and b/packages/webui/test/browser/plugin-catalogue-layout.spec.mjs-snapshots/Skill-add-form-is-centered-usable-and-submits-through-plugin-management-1-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/composer-command-overlay-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/composer-command-overlay-linux.png index 74e88ab6e..dcf361732 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/composer-command-overlay-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/composer-command-overlay-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/embedded-browser-panel-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/embedded-browser-panel-linux.png index 61f2bbe36..ff9e0e471 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/embedded-browser-panel-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/embedded-browser-panel-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/mcp-management-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/mcp-management-linux.png index 715b133a1..e9e0eeb1b 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/mcp-management-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/mcp-management-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/plugin-marketplace-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/plugin-marketplace-linux.png index b8c5bb63f..5154f200d 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/plugin-marketplace-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/plugin-marketplace-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/progress-panel-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/progress-panel-linux.png index 47fe74286..6daa40922 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/progress-panel-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/progress-panel-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/settings-dialog-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/settings-dialog-linux.png index cadd1d462..dd2d41d50 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/settings-dialog-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/settings-dialog-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/shell-and-rail-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/shell-and-rail-linux.png index 94b06d00a..8b2ed7d9e 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/shell-and-rail-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/shell-and-rail-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-management-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-management-linux.png index 93bd63b51..f1170d4bb 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-management-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-management-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-marketplace-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-marketplace-linux.png index f85816094..fbeaf67dc 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-marketplace-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/skill-marketplace-linux.png differ diff --git a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/transcript-and-composer-linux.png b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/transcript-and-composer-linux.png index 9cf6c0c15..0f4642d42 100644 Binary files a/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/transcript-and-composer-linux.png and b/packages/webui/test/browser/visual-baselines.spec.mjs-snapshots/transcript-and-composer-linux.png differ