Taking Screenshots in Playwright JS

Learn how to take screenshots in Playwright

When running tests, sometimes the code-based assertions aren’t enough, and we want to visually see what’s actually happening in our test — this is where screenshots come in handy.

If we want to actually visually see that this image was uploaded, we can take a snapshot and see exactly that. 

How to Use the Screenshot Method with Playwright

To do this inside of Playwright, we’re going to start off where for each test, we’re going to first visit that File Picker example. 

Inside of my test, if I want to take a screenshot, we can start off with the await keyword where we’re going to use the page object. Then we’re going to run the screenshot method. Inside this method I’m going to pass in a configuration object with a property of path, which I am going to set equal to the location where I want to save this screenshot. 

If I go ahead and run that test, we can see that Playwright is going to go through and open up the browser and do its work. We can see inside of this screenshots directory where I have my screenshot file exactly how it looks in the browser.

How to Take Screenshots of Uploaded Images with Playwright

In our example, we want to also see that whenever somebody uploads a photo, that we actually get a snapshot of that image. 

In this case, if we wanted to perform the action of actually uploading the file first, we can first setInputFiles with an image fixture that we have locally.

Then, just like before, we can add that line for the screenshot and we can change the name.

When we run the test, just like before, it’s going to go through and run both of those tests now and grab both of those screenshots. We can see inside the screenshots directory that not only do we have that original image, but we now have that image with that uploaded image inside of the browser.

Summing It Up – heading

In review, anytime you want to take a screenshot inside of our Playwright test, we can use the screenshot method right on the page object. Once we set a path and run our tests, we can see our images show up exactly where we set them.

Resources

• Git Repo – screenshot.spec.js
• Applitools Kitchen – File Picker