Lit webview browser testing
Real browser required for Lit updates, custom elements, popovers, shadow DOM, accessibility trees, and ElementInternals.
Harness boundary
- Real Lit components, controller, and Effect application lifecycle; only extension backend replaced with a fake service layer.
- No emulated
acquireVsCodeApi() or local server.
- Fake types derived from their factory/service source of truth—not handwritten copies.
- Fakes support deterministic state emission, action recording, typed stream/dispatch failures, controllable latency, and resource counters.
- Fake latency via Effect
Clock; TestClock in Effect tests, not wall-clock waits.
What to test here
- Component contracts and state/action flows: initial, loading, disabled, empty/no-match, invalid/recoverable, restored, external update, success, failure.
- Action count/payload, including rapid or latent actions when cancellation/serialization matters.
- Connect, disconnect, reconnect, listener/subscription cleanup, scoped finalization.
- Keyboard, focus, theme, and form behavior where browser semantics matter.
- Thin extension-host E2E: VS Code wiring, packaging, CSP/resources, desktop/web integration, critical journeys.
Interaction rules
- Controls located by accessible role/name/label; documented public
value/checked set before dispatching the public event.
- Observable UI/application assertions—not private state or arbitrary render delays. Mount helper may await
updateComplete to establish readiness.
- Unavoidable shadow traversal isolated in 1 named helper, only for otherwise unobservable contracts such as
ElementInternals form association.
- Wrapper adapting an inaccessible nested node: user-visible accessibility assertion first; narrowly scoped implementation assertion only if needed.
Repository integration
- Compile, fixture bundle, and browser execution in the package Wireit graph and relevant CI
test:web path.
- Package compile, lint, unit tests, and focused browser suite run from repository root.
- General syntax/reliability: playwright-e2e. This skill owns the component-test boundary.
Examples: packages/soql-builder-ui/test/browser/, packages/soql-builder-ui/src/testing/fakeEffectService.ts.
1---2name: lit-webview-testing3description: Write or review browser component tests for Lit webviews and VSCode Elements. Use for Playwright component harnesses, fake Effect services, accessibility locators, shadow DOM boundaries, lifecycle tests, and deciding what belongs in component tests versus VS Code E2E.4---56# Lit webview browser testing78Real browser required for Lit updates, custom elements, popovers, shadow DOM, accessibility trees, and `ElementInternals`.910## Harness boundary1112- Real Lit components, controller, and Effect application lifecycle; only extension backend replaced with a fake service layer.13- No emulated `acquireVsCodeApi()` or local server.14- Fake types derived from their factory/service source of truth—not handwritten copies.15- Fakes support deterministic state emission, action recording, typed stream/dispatch failures, controllable latency, and resource counters.16- Fake latency via Effect `Clock`; `TestClock` in Effect tests, not wall-clock waits.1718## What to test here1920- Component contracts and state/action flows: initial, loading, disabled, empty/no-match, invalid/recoverable, restored, external update, success, failure.21- Action count/payload, including rapid or latent actions when cancellation/serialization matters.22- Connect, disconnect, reconnect, listener/subscription cleanup, scoped finalization.23- Keyboard, focus, theme, and form behavior where browser semantics matter.24- Thin extension-host E2E: VS Code wiring, packaging, CSP/resources, desktop/web integration, critical journeys.2526## Interaction rules2728- Controls located by accessible role/name/label; documented public `value`/`checked` set before dispatching the public event.29- Observable UI/application assertions—not private state or arbitrary render delays. Mount helper may await `updateComplete` to establish readiness.30- Unavoidable shadow traversal isolated in 1 named helper, only for otherwise unobservable contracts such as `ElementInternals` form association.31- Wrapper adapting an inaccessible nested node: user-visible accessibility assertion first; narrowly scoped implementation assertion only if needed.3233## Repository integration3435- Compile, fixture bundle, and browser execution in the package Wireit graph and relevant CI `test:web` path.36- Package compile, lint, unit tests, and focused browser suite run from repository root.37- General syntax/reliability: [playwright-e2e](../playwright-e2e/SKILL.md). This skill owns the component-test boundary.3839Examples: `packages/soql-builder-ui/test/browser/`, `packages/soql-builder-ui/src/testing/fakeEffectService.ts`.
forcedotcom