Taking Screenshots with Cypress 

Learn how to take a screenshot in Cypress

When writing tests, sometimes you need to know not only if the code is working right, but if it visually works as well. 

For instance, if I’m using this File Picker and I select my photo, I can know that programmatically this works by checking the upload preview and that the DOM is looking right. But I don’t necessarily know that the image is loading okay.  

To actually get a picture as to what this looks like, we can use screenshots right inside of Cypress to get a snapshot of the browser. 

To start off, we have a Cypress test where every single time a test runs, we’re going to first visit the File Picker site. Then we can run our assertions.

Using the Cypress Screenshot API

If I wanted to simply take a snapshot and not actually do anything else, I can simply run cy.screenshot(). That’s going to immediately take a screenshot of the browser. 

We can see that this works by opening Cypress with our new test. Once the browser loads, we can see that Cypress is actually going to go through and it’s going to take a snapshot, which it states right inside of the Cypress logs.

Now if we want to see that screenshot, we can go back over to our project, where underneath the screenshots directory, we can see we have a new screenshot file that shows our site.

Taking Screenshots with Cypress File Upload Plugin

Now this could be helpful on its own, but what if we wanted to try to take a screenshot when somebody actually tried to upload a file to our File Picker? 

Inside of our test, we’re going to first get our photo upload button by specifying cy.get, and we’re going to pass in the ID of “#photo-upload”. 

Next, I’m going to use a command using a plugin called cypress-file-upload, where I can next specify attachFile. Inside that I’m going to pass in the path to my image, which is under the images directory inside of my fixtures directory. 

When we run that test, we can see that it uploads that file right inside of Cypress.

But now just like before, if we wanted to make sure that this image is actually getting uploaded as we expect, we can also take a screenshot just like our first test, where we’ll simply cy.screenshot. 

Now again, we can see inside of our test that it went through, and it took a screenshot. If we look back inside of our code underneath our screenshots directory, we can see that we have now 2 images. One is an image of it actually uploading our photo; and another one, which was our original, which doesn’t do anything except take that screenshot.

How to Screenshot Test Failures with Cypress

Now as great as the screenshot API is, if all you want to do is take a screenshot if an error occurs, Cypress automatically does that. The only thing to consider though is you’re not going to actually see those snapshots if you’re running using cypress open. 

Instead, if we’re using cypress run or Continuous Integration, Cypress will automatically take those screenshots for us. To test this out, we’re going to check to see if that image is available even if we don’t actually upload a new file. 

If we run these tests, we can see that Cypress goes through and performs the original test, but it also gets to this last one and actually fails, but that’s as expected. 

Back in our screenshots folder, we can see that we have those original ones that we saw, but we don’t have anything about that failure. But that’s because we’re currently running our tests using the cypress open command, which opens this nice UI where we can run our tests.

This time, if I run the cy:run command inside of the cy.open, it’s going to go through and take those screenshots programmatically. And once those tests finish, we can see that we get our failed test. 

But if we now go back over to our code and open our project, we can see that there’s a new screenshot. If we take a look, we can see that error exactly when it happened within the test. We can also see the UI where in our end, since we don’t have any image, which is expected. That’s why the test failed. 

The great thing is if we want to take specific screenshots of something we want to see, we can use the screenshot API. But if we only want to see failures, we can know that Cypress will automatically do this when it’s running the tests.

Summing It Up – Taking Screenshots with Cypress

In review, if we want to take a screenshot of our browser, we can use the cy.screenshot API, where it’s going to load up the browser and simply take a screenshot. 

This becomes even more powerful when we want to try to get an actual screenshot when something occurs, such as if we upload a photo to the page and we want to make sure that that photo loads properly. 

Finally, it’s also important to note that Cypress will take screenshots automatically, but only upon failure and only when you’re running it in the run mode. But either way, with both tools at our disposal, we have a great way of capturing screenshots of what our application actually looks like.

Resources

• Git Repo – screenshot.spec.js
• Applitools Kitchen – File Picker
• Cypress Docs – cy.screenshot API
• NPM – cypress-file-upload Plugin