Search code examples
playwright

How can you debug missing snapshots in Playwright (Interactive Mode)


When you run Playwright with the --ui option, you can run your tests in "interactive mode", and after the test finishes you can click on each step of the test to see a "snapshot" (basically a screenshot, but with a stored webpage you can view also).

This is an amazing and incredible feature! There's just one problem: for some reason I don't understand, Playwright sometimes fails to generate these snapshots, in which case I just see a blank screenshot that opens up to about: blank.

Actually, to be more specific, it displays as about:blank in the Playwright tool, but when I open the page it's a long Playwright URL with "This localhost page can’t be found". An example URL would be http://localhost:58519/trace/snapshot.html?r=http%3A%2F%2Flocalhost%3A58519%2Ftrace%2Fsnapshot%2Fpage%40f0743081a95419233a6a58f16386745d%3Ftrace%3D%252FUsers%252Fme%252Fnew-ui%252Fmycompany%252Fe2e%252Ftest-results%252Fintegrations.spec.tsx-Create-without-a-name-fails-to-submit-and-shows-an-error-on-the-name-field-chromium%252Ftrace.zip%26name%3Dbefore%2540call%254093&trace=%2FUsers%2Fme%2Fnew-ui%2mycompany%2Fe2e%2Ftest-results%2Fintegrations.spec.tsx-Create-without-a-name-fails-to-submit-and-shows-an-error-on-the-name-field-chromium%2Ftrace.zip

Usually this happens at the end of a test, but (strangely) I still have snapshots from the test's "After Hooks", which (obviously) occurred after the test finished.

My question is, how can I figure out (and ideally fix) what is causing these snapshots to fail to be saved?


Solution

  • Well, I feel stupid, but I think the answer to my question is "Playwright does this when a step times out."

    Now, I think this is dumb behavior: it would be super helpful if Playwright instead took a snapshot at the end of the timeout (or even before), rather than not taking one at all ... but at least I now have an explanation.