[knihit]

Description

workflow-canvas/ end-to-end tests:

• Added @playwright/test 1.64.1 and @axe-core/playwright 4.14.0, exact-pinned, to the existing package.json (no new package) — runs the UI in a real browser, which the jsdom unit tests cannot.
• Added playwright.config.ts (the functional suite), playwright.screenshots.config.ts (the screenshot capture) and playwright.shared.ts (what they share): Chromium only, 1280x800 viewport, light color scheme, reduced motion, fixed locale and time zone. They build the app and serve it with vite preview through webServer, so tests run against the production bundle. webServer is a list, so the stub API planned for a later PR gets its own entry there. Retries are off in the shared config, so a flaky test fails the run and the screenshot capture has the same setting.
• Added e2e/tests/: the page loads with the "Workflow canvas" h1 inside the main landmark, Designer is selected first, Designer to Execution and back asserts both tab states and panels, and axe reports no violations on either tab. I checked the axe helper can fail by running it on a page with known problems.
• Added e2e/support/: a WorkflowCanvasPage page object with an expectTabShown assertion helper, a test fixture that opens the app, and the axe and screenshot helpers — so later PRs add tests without repeating selectors.
• Added npm run test:e2e (functional tests) and npm run screenshots (rewrites the PNGs). The capture has its own Playwright config, so npm run test:e2e, a bare npx playwright test and editor integrations never touch committed files; I ran the last two and git status stayed clean.
• Added e2e/screenshots/designer-tab.png and execution-tab.png, full page, light theme (shown below). The capture loads Open Sans from the exact-pinned @fontsource-variable/open-sans dev dependency (Cloudscape names it first in its font stack but does not ship it) and turns off text hinting and LCD smoothing, so the files are byte-identical across runs and machines (checked between this machine, the Playwright Docker image and the CI artifact, which has the same SHA-256 as the committed files).
• typecheck now also checks e2e/ and the Playwright configs. ESLint applies the same strict rules to e2e/, with type information, @typescript-eslint/no-floating-promises and eslint-plugin-playwright (exact-pinned), so a missing await or a fixed waitForTimeout fails lint. I checked both fail on a throwaway spec.

CI:

• .github/workflows/workflow-canvas.yml: added an e2e job on Node 24 that installs Chromium with system dependencies, runs test:e2e, regenerates the screenshots, fails if they differ from the committed files (git diff --exit-code, with a message that says to run npm run screenshots), and uploads the HTML report and the screenshots as artifacts whether the run passes or fails. The report upload warns and the screenshot upload fails when no files are found. Permissions stay contents: read; actions/upload-artifact v7.0.2 is pinned by SHA like the other actions. The existing lint/typecheck/test/build job is unchanged.

Docs:

• workflow-canvas/README.md: how to install the browser, run the tests, read the report and regenerate screenshots, and that a vite preview left running on port 4173 makes the run fail.
• CHANGELOG.md: entry under Unreleased. VERSION is not bumped.

Screenshots

Designer tab:

Execution tab:

Type of Change

• Dependency change (package.json, Cargo.toml, or CLI dependency)
• Infrastructure / pipeline
• Documentation
• Other: end-to-end tests for workflow-canvas/

Testing

• npm test passes (runs tests/scripts/**/*.test.js). Not rerun for this PR: it changes nothing outside workflow-canvas/, CHANGELOG.md and the workflow-canvas workflow.
• In workflow-canvas/: npm run lint, npm run typecheck, npm test (3 unit tests), npm run build and npm run test:e2e (5 tests; 3 runs of 10 repeats each, 4 workers, 0 failures) pass locally on Node 24
• New code files carry the required SPDX header; JSON is exempt

Checklist

• My code follows the style guidelines of this project (see AGENTS.md's Code Style & Conventions)
• I have performed a self-review of my own changes
• I have commented my code where necessary
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added or updated tests that prove my change works

Notes for Reviewers

• The second PR in a stack: integration/workflow-canvas <- Add workflow-canvas scaffold: Vite, React, Cloudscape, CI #77 (wc/01-scaffold) <- this PR. Base is wc/01-scaffold; GitHub retargets it as Add workflow-canvas scaffold: Vite, React, Cloudscape, CI #77 merges.
• Screenshots are pinned to one font and rasterisation setting, so a regenerated PNG should match what CI generates. CI compares the files it generates with the committed ones byte for byte and fails on a difference.
• The e2e job runs Node 24 only: Node is just the test runner and build tool here, and the browser is what the tests exercise. The existing job still covers 24 and 26.
• Not in this PR: API contract, stub server, canvas features.
• package-lock.json accounts for 114 of the added lines; the rest is about 435 lines.

[knihit]

Kept the byte-exact screenshot check on purpose: it catches real rendering drift. Added a README note: after a Playwright, Chromium, font or Node bump, run npm run screenshots and commit the images. Fixed in 4424743.

The merge-base changed after approval.