Capture Failed Test Videos and Screenshots with Playwright

Basarat Ali Syed: [0:00] In addition to the Trace Viewer which we saw in a previous lesson, another postmortem debugging tool that is provided by Playwright is that of taking screenshots as well as recording test videos. To demo these features, we have the same test that is designed to fail because of a simple typo in the expectation.

[0:17] Unlike traces, screenshots and videos are not enabled by default. We can enable them within our playwright.config.ts in the use section. To enable screenshots on all failures, we're going to use the config option which is only on failure. With this option enabled, we get a screenshot of what the URL looks like, whenever a test fails.

[0:36] Unlike screenshots, which can be recorded after a test fails, a video is something that needs to be recorded throughout a test run. One option to enable video recordings is to only enable them on a first retry, and this is a good option to have on your CI server.

[0:50] However, for the sake of this demo, we will use another option, which is retain-on-failure, in which case, Playwright will always record a video, but only keep the final file if the test ends up failing. This does make the overall run a bit slower because the video is always recording, but we are guaranteed to get a video file for any test failure.

[1:09] We run the test like we normally would -- that is with the npx playwright test command -- and once the test run completes, we get the output screenshots in the videos in the test results folder.

[1:19] Under that folder, we have a folder for this particular test. Within that, we have the image and the video. The image represents the final state of the application while it is waiting for cheeze with a z to appear. The video is exactly what you would expect.

[1:33] We can navigate to the page, edit todo item and then wait for cheeze with a z to appear, which of course, will not. Eventually, the test will terminate.