Name: Capture Failed Test Videos and Screenshots with Playwright
Uploaded: 2022-03-07T20:28:11-06:00
Description: 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.

Playwright Tests API Basics

Setting up Microsoft Playwright

Adding Playwright to your Web App

Playwright VSCode Extension

Visual Regression Testing with Playwright

Generate Playwright Snapshots on your CI Server

Debugging Playwright Tests with Inspector

Quickly Generate Playwright Tests with Codegen

Postmortem Debugging Failed Tests with the Playwright Trace Viewer

Capture Failed Test Videos and Screenshots with Playwright

Playwright Selectors

Page Object Model Pattern with Playwright

Playwright Test Fixtures, Browser Context and Page

Playwright Library for Browser Automation

Use Playwright to Test and Automate Web Applications

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.

https://app.egghead.io/api/v1/lessons/playwright-capture-failed-test-videos-and-screenshots-with-playwright/subtitles

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.

Capture Failed Test Videos and Screenshots with Playwright

Share this video with your friends

Course

Use Playwright to Test and Automate Web Applications