Capture Failed Test Videos and Screenshots with Playwright

Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

A common post mortem debugging tool for e2e tests is screenshots and videos. These can be enabled via options in the Playwright config and that is what we demo in this lesson.

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.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today