Test Recorder / Codegen tab in UI for Browser Mode

Clear and concise description of the problem

As a developer using Vitest Browser Mode, I want a built-in way to record interactions and generate test steps similar to what playwright codegen offers.

The recorder/codegen UI could live as a dedicated tab in the Vitest UI.

Suggested solution

Rely on the existing tooling provided by the Playwright provider.

Much of the required functionality already exists and is exposed by Ivya (which is used by vitest browser).

Basic details

• Add a new Recorder/Codegen tab in the Vitest UI with a simple code editor area that displays the generated steps, plus basic controls (record toggle, clear, copy).
• When recording is enabled, attach a useCapture event listener to the test’s rendered container (Browser Mode test root) and record all events.
• Filter recorded events to the relevant interaction events (click/type/change/etc.) and generate a locator-based code line using existing APIs:

  import { page } from 'vitest/browser'
  import { asLocator } from 'ivya'
  
  const selector = page.elementLocator(e.target).selector
  asLocator('javascript', selector).toString()
  // produces something like await page.getByRole(...).click()
  

• Ability to commit the generated steps into an existing test or create a new test from the recording.

If this feels aligned with Vitest’s direction, I’d be happy to try drafting a PR.

Alternative

Attempt to just use the playwright codegen as is, and try to manipulate it so it will integrate well inside a vitest-browser test

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Start by tracing the Vitest UI Browser Mode integration and the test’s rendered container, then inspect the existing useCapture listener and Playwright-provider APIs mentioned in the issue. Done means a Recorder/Codegen tab can capture relevant interactions, display locator-based generated steps, and support the requested clear, copy, toggle, and test-creation or commit workflows.