[Feature]: Sync the DOM snapshots with the screenshots taken while tracing

[bockstaller]

🚀 Feature Request

Tracing can be configured to take screenshots to build the film strip on top. Alongside are the dom snapshots taken before, during, and after playwright's action. I would like (the option) to create a dom snapshot in sync with each screenshot taken for the film strip.

Example

Assume we have a test that asserts that a special toast pops up:

await expect(page.getByTestId('toast-test-id')).toBeVisible()

The test fails and we start debugging it with the trace viewer. Scrubbing through the filmstrip, the toast becomes visible and then turns invisible. Great! We know the application is working, we should've used a more robust locator. Lets test it in the locator window! But there, the toast is never visible. We took snapshots before the expect, during the expect (but too early for the toast) and after the expect (where the toast was already hidden).

Having these extra snapshots synced with the screenshots would allow you to debug the test completely inside the trace viewer.

These screenshot-snapshots could be represented in the actions list as extra blank listitems with no inner text and a fractional height of a regular listitem. Selecting one of these screenshot action items would open the respective snapshot in the snapshot viewer.

Motivation

Sometimes, debugging a test can confuse people who are new to playwrights' trace viewer. I had to assist multiple colleagues who assumed that there was a tighter coupling between screenshots and snapshots. They wondered why they could see some behavior in one part of the UI (filmstrip) but could not debug it in another (snapshot viewer).