Skip to content

feat: integrate trace mark with render#47

Merged
sheremet-va merged 11 commits intomainfrom
02-19-feat_add_trace_mark_on_render
Mar 9, 2026
Merged

feat: integrate trace mark with render#47
sheremet-va merged 11 commits intomainfrom
02-19-feat_add_trace_mark_on_render

Conversation

@hi-ogawa
Copy link
Copy Markdown
Contributor

@hi-ogawa hi-ogawa commented Feb 19, 2026

This PR adds mark API inside render/rerender/unmount calls.

Example

$ pnpm test --run --browser.trace --browser.headless render.test.tsx
$ pnpm playwright show-trace .vitest-attachments/test-traces-render-test-tsx-react--chromium--renders-counter-0-0-trace-zip-9387db5f219ca34ece839c1eb57841b5ebb3e0c2.zip
Screencast.From.2026-02-27.09-45-00.mp4

}

function mark(locator: Locator, name: string, fn: Function, error: Error) {
if ('captureStackTrace' in Error) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we create the error only if mark exists?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved new Error + captureStackTrace guarded inside.

If we want to avoid this based on trace activity, then we need to expose getBrowserState().activeTraceTaskIds.has(currentTest.id) like logic (which is what vitest browser use internally to avoid overhead entirely) to user land.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alternatively we could change the API to receive the locator.mark(name, { captureStackTraceFn: fn }) instead of locator.mark(name, { stack }) 🤔

@hi-ogawa hi-ogawa self-assigned this Mar 5, 2026
@hi-ogawa hi-ogawa marked this pull request as ready for review March 6, 2026 05:52
@sheremet-va
Copy link
Copy Markdown
Member

Could you also open PRs to vitest-browser-vue and vitest-browser-svelte?

@hi-ogawa
Copy link
Copy Markdown
Contributor Author

hi-ogawa commented Mar 7, 2026

Vue and Svelte render helper is synchronous so it's not possible to adopt mark internally. Technically we could call mark and await promises in afterEach, but this causes slight glitches in trace result because currently our mark is actually implemented as group + groupEnd calls and some following actions and expect.element can happen in between unless groupEnd is awaited before that. This will likely change if playwright provides one-shot trace call microsoft/playwright#39308, so we can just fire-and-forget async call, then await them in afterEach.

@sheremet-va
Copy link
Copy Markdown
Member

I think you can return a then property and do it there - if render is awaited, we add a mark. In the next major we can make the render function itself async.

@hi-ogawa
Copy link
Copy Markdown
Contributor Author

hi-ogawa commented Mar 9, 2026

@sheremet-va that's genius!

hi-ogawa and others added 3 commits March 9, 2026 17:30
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@sheremet-va sheremet-va merged commit 2b9835d into main Mar 9, 2026
4 checks passed
@hi-ogawa hi-ogawa deleted the 02-19-feat_add_trace_mark_on_render branch March 9, 2026 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants