feat: add page/locator.mark API to enhance playwright trace

[hi-ogawa]

Description

Currently Vitest's playwright trace only logs playwright's action API (e.g. click). This PR adds "mark trace" command to add an arbitrary point in trace. This can be also used internally for expect.element, actions and render utility to show assertion location in source code.

The trace source from remote machine requires microsoft/playwright#39302 to be fixed, but this PR should give other improvements already, so I don't think we need to wait for that.

TODO

• docs
• test
• test combining with vi.defineHelper
• update vitest-browser-xxx render API to trigger trace
  • feat: integrate trace mark with render vitest-community/vitest-browser-react#47
• use locator.describe to strip off iframe[data-vitest="true"]
• mark actions with source
• embed custom location sources in zip
  • [Bug]: custom location of tracing.group API is not included in zip output microsoft/playwright#39302
• request upstream playwright API to replace group + locator._expect('to.be.attached') hack (can be follow-up)
  • [Feature]: Custom tracing marker API with selector and snapshot microsoft/playwright#39308

Example:

$ VITE_FAIL_TEST=1 pnpm -C examples/lit test --browser.trace=on --browser.headless --run
$ pnpm exec playwright show-trace examples/lit/test/__traces__/basic.test.ts/chromium-Button-with-increment-should-increment-the-count-on-each-click-0-0.trace.zip

🎥 trace view

Screencast.From.2026-02-20.10-00-45.mp4

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
• Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

[netlify]

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9bed8b3
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/69991bd408f7d200080ab128
😎 Deploy Preview	https://deploy-preview-9652--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

@vitest/browser

npm i https://pkg.pr.new/@vitest/browser@9652

@vitest/browser-playwright

npm i https://pkg.pr.new/@vitest/browser-playwright@9652

@vitest/browser-preview

npm i https://pkg.pr.new/@vitest/browser-preview@9652

@vitest/browser-webdriverio

npm i https://pkg.pr.new/@vitest/browser-webdriverio@9652

@vitest/coverage-istanbul

npm i https://pkg.pr.new/@vitest/coverage-istanbul@9652

@vitest/coverage-v8

npm i https://pkg.pr.new/@vitest/coverage-v8@9652

@vitest/expect

npm i https://pkg.pr.new/@vitest/expect@9652

@vitest/mocker

npm i https://pkg.pr.new/@vitest/mocker@9652

@vitest/pretty-format

npm i https://pkg.pr.new/@vitest/pretty-format@9652

@vitest/runner

npm i https://pkg.pr.new/@vitest/runner@9652

@vitest/snapshot

npm i https://pkg.pr.new/@vitest/snapshot@9652

@vitest/spy

npm i https://pkg.pr.new/@vitest/spy@9652

@vitest/ui

npm i https://pkg.pr.new/@vitest/ui@9652

@vitest/utils

npm i https://pkg.pr.new/@vitest/utils@9652

vitest

npm i https://pkg.pr.new/vitest@9652

@vitest/web-worker

npm i https://pkg.pr.new/@vitest/web-worker@9652

@vitest/ws-client

npm i https://pkg.pr.new/@vitest/ws-client@9652

commit: 9bed8b3

[hi-ogawa]

stack? option is added so that vitest-browser-xxx render helper can manipulate the trace. see vitest-community/vitest-browser-react#47