Create Videos and Screenshots With Playwright

If you need to find out what went wrong during an end-to-end test, a recorded video of the browser with all its interactions can be a time saver. What is true for Selenium Grid is also a good idea for Playwright. Let’s look at how we can create these videos with in NUnit and a library project.

 

Videos in library projects

We can copy the code from the documentation and put it into our application without any changes:

If we run our application, we must wait until it finishes before we find the recording in the videos folder:

The video has a unique id

 

Videos in NUnit

If we try to copy the code from the documentation into our NUnit tests, it will not work. We are too late to influence the options. Instead, we need to override the virtual method ContextOptions() that we get by inheriting our test class from PageTest:

When the test finishes, the recording shows up in the videos folder as it did in the library project.

 

Create screenshots

We can create screenshots on the Page object with the method ScreenshotAsync(). Since this method is on the Page object, we can use the same code in NUnit and in a library project:

If we use the parameter FullPage, we get a screenshot of the full page, including the parts that are not visible in the Browser:

The FullPage option gives us everything on the page.

If we omit FullPage or set it to false, we get a screenshot of only the visible part of the page:

We see what the browser sees.

If you should use the FullPage option or not depends on your use case. For figuring out what went wrong I prefer to see exactly what the browser sees.

 

Next

Creating videos out of the box is a great feature. Unfortunately, the official documentation is not that useful if you want to create videos in NUnit. I hope this post clear things up. Next week we look at little tweaks to customise Playwright.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.