Verifying Sortable Tables in Playwright JS
- Colby Fayock, Developer Advocate, Applitools
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.
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.
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.
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.
Here’s the code sample from our tutorial on how to take screenshots in Playwright
We hope you are enjoying our library of exclusive content.
To gain instant access to all premium content in the on-demand library, fill out the form below. Once the form is submitted, you will not be prompted again.