Skip to content

test(webview): use the real VS Code toolkit in Playwright visual baselines #2105

Closed

Description

@edelauna

Problem

The Playwright visual tests do not show the real VS Code toolkit components.

webview-ui/playwright/vite.config.ts replaced @vscode/webview-ui-toolkit/react with the Vitest mock (webview-ui/src/__mocks__/@vscode/webview-ui-toolkit/react.tsx) for every story. The mock draws a plain <input> and puts the label after it. The extension uses real toolkit custom elements, which put the label above the field and add padding and borders.

As a result, baselines that show a VSCodeTextField (and other toolkit components) do not look like the extension. Example: openai-compatible-azure-guidance-dark.png shows each label under its input. A visual test that does not match the extension gives little value.

Current state

PR #1299 adds Ollama.visual.tsx. It is the first story that uses the real toolkit.

  • vite.config.ts now has a plugin, playwright-gallery-toolkit-mock. It gives the mock to every importer except those in realToolkitImporters.
  • realToolkitImporters has one entry: /settings/providers/Ollama.tsx.
  • optimizeDeps.include lists the toolkit. Without it, a cold Vite cache makes the first run fail.

Task

  1. Move every story that uses toolkit components to the real toolkit. Add each importer to realToolkitImporters, or remove the mock for the gallery.
  2. Regenerate the baselines with pnpm test:visual:docker:update.
  3. Review each new image against the extension.
  4. Check that the contrast audits and layout contracts still pass.

Notes

  • In a trial that removed the alias for all stories, 26 visual tests failed. The count includes tests that are also flaky on the unchanged branch (for example RenderedContentContrast). Check this count again before the work starts.
  • RenderedContentContrast and ChatTextArea failed in a full local Docker run on an unchanged branch. They passed when run alone. Find the cause before you trust a full-suite result.
  • Do this in small steps, for example one settings area for each PR, so each baseline review stays small.

Related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions