feat(trace viewer): show Screenshot instead of Snapshot

[Skn0tt]

Closes https://github.com/microsoft/playwright/issues/23964.

Trace snapshots are a best-effort snapshots of the browser DOM, but we can't guarantee them to be exactly what the browser showed. One example of this is canvas elements, where you just can't see their contents. That makes snapshots useful, but not perfect.

For those cases where the snapshot doesn't show everything, this PR introduces a new setting to show a screenshot instead. You won't be able to scroll or inspect the DOM or select a locator anymore. But if the snapshot was missing something, or displaying something wrong, you can now check the screenshot instead.

[github-actions[bot]]

Test results for "tests 1"

2 failed :x: [webkit-library] › library/modernizr.spec.ts:33:3 › safari-14-1 :x: [webkit-library] › library/modernizr.spec.ts:83:3 › mobile-safari-14-1

30060 passed, 866 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

9 passed :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › babel.spec.ts:135:5 › should not transform external

4 flaky

:warning: [playwright-test] › ui-mode-test-ct.spec.ts:188:5 › should watch component
:warning: [webkit-library] › library/download.spec.ts:698:3 › should convert navigation to a resource with unsupported mime type into download
:warning: [webkit-page] › page/page-goto.spec.ts:312:3 › should fail when navigating to bad SSL after redirects
:warning: [playwright-test] › ui-mode-test-watch.spec.ts:145:5 › should watch all

29577 passed, 629 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

9 passed :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › babel.spec.ts:135:5 › should not transform external

6 flaky

:warning: [chromium-library] › library/trace-viewer.spec.ts:1469:1 › should allow showing screenshots instead of snapshots
:warning: [firefox-page] › page/frame-goto.spec.ts:46:3 › should continue after client redirect
:warning: [chromium-library] › library/trace-viewer.spec.ts:248:1 › should have network requests
:warning: [playwright-test] › ui-mode-test-progress.spec.ts:165:5 › should update tracing network live
:warning: [webkit-library] › library/download.spec.ts:698:3 › should convert navigation to a resource with unsupported mime type into download
:warning: [webkit-library] › library/trace-viewer.spec.ts:1469:1 › should allow showing screenshots instead of snapshots

29587 passed, 629 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

1 failed :x: [playwright-test] › babel.spec.ts:135:5 › should not transform external

3 flaky

:warning: [chromium-library] › library/page-clock.spec.ts:343:3 › popup › should not run time before popup on pause
:warning: [webkit-library] › library/download.spec.ts:698:3 › should convert navigation to a resource with unsupported mime type into download
:warning: [webkit-library] › library/video.spec.ts:165:5 › screencast › should work with old options

29590 passed, 629 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

1519 passed, 6 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[github-actions[bot]]

Test results for "tests 1"

2 failed :x: [installation tests] › playwright-test-package-managers.spec.ts:61:5 › yarn: @playwright/test should work :x: [playwright-test] › babel.spec.ts:135:5 › should not transform external

29592 passed, 629 skipped :heavy_check_mark::heavy_check_mark::heavy_check_mark:

Merge workflow run.

[craigglennie]

Sorry for what's probably a dumb question: how do I use this? I've looked for an option in the UI (the one you get by passing the --ui flag) but failed to find anything. My Playwright version is 1.48.2.

[Skn0tt]

Hi Craig! There's no such thing as a dumb question :D This feature got reverted, we implemented a different fix for showing canvases that'll go out with 1.49. It'll be enabled by default - if you want to beta test, take a look at canary: https://playwright.dev/docs/canary-releases

[craigglennie]

Thanks! I took a quick look and yay, I can see the canvas now.

There are some visual differences from reality in the trace now, is this expected? The image we're rendering on the canvas appears to be slightly vertically stretched, and the toolbars (which are React elements, they're not in the canvas) are duplicated. That's with 1.49.0-alpha-2024-11-07. On 1.48.2 everything looks correct (except for the original problem of not being able to see what's on the canvas).

1.48.2

1.49.0-alpha-2024-11-07

[Skn0tt]

This is a bug, but it's not surprising to me. We fill the canvas based on screenshots, looks like we're stretching something incorrectly. That's also the reason you see a duplicate toolbar. Could you file a bug about this and include a repro? I'm happy to take a look.