Screenshots and Videos Capturing | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
In this lesson, we discussed how to capture screenshots and videos of your tests using Playwright . This functionality is useful for documentation and debugging purposes. Screenshots To create a screenshot after a specific test step, use the following command: await page.screenshot({ path: 'screenshots/formLayoutsPage.png' }); This command saves the screenshot in a designated folder. You can also capture a screenshot of a specific area of the page by using a locator: await page.locator('inline form').screenshot({ path: 'screenshots/inlineForm.png' }); Additionally, you can save a screenshot as a binary for integration with other systems: const buffer = await page.screenshot(); To log the binary in base64 format: console.log(buffer.toString('base64')); Videos To record videos, modify the playwright.config.ts file: video: 'on', There are several options for video recording: on : Record all tests. off : No recording (default). retainOnFailure : Record only failed tests. retryWithVideo : Record on the first retry. Run tests via the command line to ensure videos are recorded: npm run page objects chrome Videos are automatically attached to the test report, which can be viewed using: npx playwright show report Summary In summary, to capture screenshots: Use page.screenshot() for full-page screenshots. Use locator.screenshot() for specific sections. Save screenshots as binary for further use. For videos, adjust the configuration and set the desired resolution for better quality.
Video Transcript
In this lesson, we will talk about how to capture screenshots or videos of your tests. Sometimes you may need this information to upload to a particular folder or maybe to attach to some report, something like that. And there are several ways how you can do it and how to configure in the Playwright. So in this lesson, we will talk about this. Let's get into it. Previously, when we made a review of the Playwright, I showed you the concept of trace. Trace is a series of snapshots of the test run. So it's very useful to use for debugging of the test, because you also have the log, you have the steps of execution and much more details. So screenshots or videos from this perspective is not the best way to debug the test, better to use traces. But sometimes having screenshots and videos can be useful. So let me show you how to do that. So let's use this usePageObject.spec.ts. And let's assume that we want to create a new screenshot after this step. So once we fill out test.test.com.welcome1, we want to create a screenshot and to see if this step was actually completed. How to do that is very simple. So you type await page.screenshot. And all you need to do is provide the path where you want to save your screenshot and under what name. You can create any new folder. So for example, let's create a new folder, screenshots. And we want to call this file as formLayoutsPage.png. Well, that's it. And now if we run this test, the screenshot will be created. Running this test. All right, test completed. And we can see that new folder screenshots is created over here. And I click on that and we can see that right after entering username and password into using the grid form, screenshot was created exactly as we put it right here. Also, sometimes you may need a situation where you need to create a screenshot of the just particular area, not the entire browser view, but just some section. For example, we want to create a screenshot for inline form, just this one, to see how our random generator is working. So let's put this step right after this step. And we need to do what? We need a locator for this web element, for this inline form. Let me speed this up and I just grab this locator from here. Going back, await. Await page locator inline form, and then I type .screenshot and pretty much the same process. I provide the path. And let's run this test one more time. All right, test completed, and we see that new screenshots showed up in the screenshots folder. Inline form, here we go, we have a screenshot just for the inline form. And the third example, what you can do with the screenshots. Let's say that after the screenshot is created, you want to save it as a binary in order to send to some other system or some other browser. You want to save it as a binary in order to send to some other system or servers or maybe integrate with a Slack. So you can save this screenshot as a binary as well. So let's say I create a new constant, call it buffer equals to await page.screenshot. That's it. The screenshot will be saved into this constant. And in order just to demonstrate that it will be there, I can bring this to the console log. And I put buffer.toString and just to decode as base64. So running this test one more time. Test completed, and we can see right here, this is a long, long, long token printed into the console. And it's just a binary for this particular screenshot. If you need to use it somewhere with integration with different services, you can also do that. So you can see working with the screenshots is pretty, pretty simple. So now let me show you example with the videos, when to do videos and how to use it. To record the video, you need to go to the playwright.config.ts into this use block inside of the configuration file and add video. And then you have a few options. You can use video on, video off. Off is by default, by the way. On the first retry, it means that when the test fails and on the first retry, the video will be recorded. Retain on failure means that videos will be recorded always for every test. But for the tests that are failed, the videos will be saved. And retry with video, I believe we're gonna do exactly the same on first retry. All right, we put on and let's run this test. Quick note, if I will run this test just with a VS Code plugin by clicking on this button, video is not recorded. So I need to run this test using the command line. So let's use one of the scripts that we created before. For example, this one, npm run page objects chrome. Okay, running this test. And if we open test results folder, we can see that two videos for the test number one and test number two is created. So now I can reveal this video in Finder right here and open it in the browser. And video is recorded. All right, and also this video is attached automatically to the report. npx playwright show report. This is the report. Open it up, scroll it down, and here we go. We see this video also attached automatically to the report. Yeah, it's working exactly the same. So when using videos can be helpful. Sometimes you may have animation in the web page. In this case, trace you were not always can catch the snapshots correctly. In this case, recording the video can be useful. And resolution for the video recording is 800 by 800 pixels. If you want a higher resolution for your videos, you can provide this resolution as well. Into the video, create an object and put mod we want on and then desired resolution. And property size. This is the object with, let's say, 1920 and height 180. So this will be full HD video recorded. Let's run this one more time. All right, open the report. And right now video, if I open the full screen, you see it's in much better resolution than it was before. All right, guys, that's it. So let's quickly summarize what we did in this lesson. If you want to create a video, you can do it in any of the following ways. First, you can create a video. You can create a video in a video editor. You can create a video in a video editor. You can create a video in a video editor. If you want to create a screenshot, you simply put the page.screenshot with the path of the name where you want to save a screenshot after the particular step in the script. You can also make a screenshot for the particular section on the web page. In this case, you need to provide the locator.screenshot and path to the file where you want to save the screenshot. Additionally, you can save the screenshot into the buffer in order to use this binary later on. And if you want to record the videos, you need to adjust the settings into the use section of the playwright-config.ts, and if needed, you can set up the resolution for this video. All right, that's it, guys, and see you in the next lesson.