test(webview): add Playwright visual regression harness

[edelauna]

Related GitHub Issue

Closes: #515

Description

Adds a Playwright component-test visual regression layer to webview-ui/ for components where layout, VS Code theme variables, or web-component rendering are the behavior under test — things Vitest/jsdom cannot verify.

What was added:

• playwright-ct.config.ts — component test config with path aliases mirroring vite.config.ts, vscode mock alias, and absolute CI output paths
• playwright/ — test harness: index.html applies the vscode-dark body class; index.tsx loads VS Code CSS variables, codicons, and the app stylesheet; vscode-theme-dark.css provides a complete set of --vscode-* tokens for the Default Dark Modern theme
• playwright/run-docker.mjs — Docker runner that detects Compose v2 (docker compose) and falls back to v1 (docker-compose)
• docker-compose.visual.yml — reproducible baseline environment using the pinned Playwright Noble image
• .github/workflows/visual-regression.yml — CI job triggered on webview-ui/** and src/shared/** changes, runs inside the same pinned Playwright container, uploads HTML report and test results on failure
• src/components/chat/__tests__/ProgressIndicator.visual.tsx — first visual test; waits for customElements.whenDefined and a requestAnimationFrame flush before screenshotting, so the snapshot captures the fully-upgraded shadow DOM

Key design decisions:

• Docker is the source of truth for baselines; host-rendered screenshots are not committed
• snapshotPathTemplate intentionally omits {projectName} for the single-browser setup; AGENTS.md documents that adding a second browser project requires updating the template
• outputDir and HTML reporter outputFolder are resolved to absolute paths via path.resolve(dirname, ...) so artifacts land predictably in webview-ui/ regardless of where pnpm --filter is invoked from

Test Procedure

Run the visual tests locally (requires Docker):

cd webview-ui
pnpm test:visual:docker

Regenerate baselines after an intentional UI change:

pnpm test:visual:docker:update
# commit the updated __screenshots__ files alongside the component change

CI: the Webview Visual Regression workflow runs automatically on PRs that touch webview-ui/** or src/shared/**.

Pre-Submission Checklist

• Issue Linked: Closes [ENHANCEMENT] Add Docker-backed Playwright visual smoke testing for webview-ui #515
• Scope: Changes are limited to the visual regression infrastructure and one reference test
• Self-Review: Completed
• Testing: Docker visual comparison, CI-mode artifact paths, pnpm check-types, pnpm lint, and 1,342 Vitest tests all pass
• Documentation Impact: webview-ui/AGENTS.md updated with authoring guidance, Docker requirements, and multi-browser constraints
• Contribution Guidelines: Read and agreed

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 19911589-018a-4eed-b509-b10bd924055e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch issue/515

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 95 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
webview-ui/playwright-ct.config.ts	0.00%	62 Missing ⚠️
webview-ui/playwright/run-docker.mjs	0.00%	15 Missing ⚠️
...onents/chat/__tests__/ProgressIndicator.visual.tsx	0.00%	15 Missing ⚠️
webview-ui/playwright/index.tsx	0.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!