Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: Step "after" screenshot in UI is incorrect #35285

Open
goloveychuk opened this issue Mar 19, 2025 · 2 comments · May be fixed by #35295
Open

[Bug]: Step "after" screenshot in UI is incorrect #35285

goloveychuk opened this issue Mar 19, 2025 · 2 comments · May be fixed by #35295
Assignees
@yury-s
Labels
v1.52

Comments

@goloveychuk
Copy link

goloveychuk commented Mar 19, 2025 •
edited
Loading

Version

1.51.1

Steps to reproduce

So the UI has Before and After screenshots for page calls (evaluate, click, etc) and also for steps.
The bug is that After screenshot for Step is not correct, probably same as Before.
To reproduce:

await test.step('some', async() => {
        await page.evaluate('document.body.innerHTML = "<div>hello</div>"')
})

Image
Image

From what I understood steps currently does not dispatch a call, so

playwright/packages/playwright-core/src/server/dispatchers/dispatcher.ts

Line 346 in eafcbd3

await sdkObject.instrumentation.onAfterCall(sdkObject, originalMetadata);

is not called.

This is code which finds closest snapshot for step

playwright/packages/trace-viewer/src/ui/snapshotTab.tsx

Line 339 in eafcbd3

const afterSnapshot: Snapshot | undefined = action.afterSnapshot ? { action, snapshotName: action.afterSnapshot } : beforeSnapshot;

It gets beforeSnapshot if afterSnapshot is null.

I see two solutions.

  1. step should use "after" screenshot of latest "call" done inside it. Or latest screenshot in time immediately after promise resolved.
  2. step could do additional before and after screenshots. Screenshots could be done always or additional flag "screenshot" could be provided.

Expected behavior

UI is expected to show correct screenshot.

Actual behavior

Screenshot is not correct.

Additional context

No response

Environment

System:
    OS: macOS 15.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.11 GB / 32.00 GB
  Binaries:
    Node: 22.14.0 - ~/.local/state/fnm_multishells/16295_1742312120229/bin/node
    Yarn: 4.6.0 - ~/.local/state/fnm_multishells/16295_1742312120229/bin/yarn
    npm: 10.9.2 - ~/.local/state/fnm_multishells/16295_1742312120229/bin/npm
  IDEs:
    VSCode: 1.98.2 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  
Playwright: 1.51.1
@goloveychuk goloveychuk linked a pull request Mar 20, 2025 that will close this issue
Open
@dgozman dgozman added the v1.52 label Mar 20, 2025
@dgozman
Copy link
Contributor

dgozman commented Mar 20, 2025

@goloveychuk Thank you for the issue. On the first glance, the solution step should use "after" screenshot of latest "call" done inside it looks like a good one. We'll look into this carefully though.

@goloveychuk
Copy link
Author

@dgozman I've created PR which attempts to do what you said.
#35295
It added two strategies

  1. finds first action after original action end
  2. find last action before original action end

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yury-s yury-s

Labels
v1.52
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix-steps-snapshots goloveychuk/playwright
3 participants
@goloveychuk @yury-s @dgozman