How to Perform Screenshot Testing in Cypress

The QA world is discovering various kinds of testing methods, in order to overcome the overhead of exhausting testing techniques which employ hard labor than simple, well-planned solutions. In this process of evolution, Quality engineering practice has embraced the screenshot/snapshot testing method which was previously used as a UI test automation technique. This guide explains the simple yet elegant process of using screenshots/snapshots comparison in testing flows. 

What is Screenshot Testing?

The basic idea of screenshot testing is capturing a perfect moment instance of a result which will be clarified by the tester on the relativity to the expected result. After clarification, this screenshot is stored and used whenever the test is running on the specific scenarios in which the screenshot is involved.  

For instance, consider a test to verify a table of a web page. If you get a screenshot of that table and verify the contents are correct with the provided data, then when the test run iterates you can compare that screenshot of the table with the screenshot taken in the current run and verify the content without having to go through it each iteration.

Screenshot testing eliminates the iterating process of checking and verifying the same test results over and over to ensure that the expected and real outputs match. 

The next thing is these tests have to be done on various components which gives us various and tedious to read outputs as well as expected results for them. One issue with this process is that it has to be repeated multiple times. 

Testers usually, use copy and pasting methods to reduce the complexity. The copy-paste method is where one copies both the expected and real outputs, pastes them alongside, and then compares them through a code snippet.

The major setback in this method is that you have to copy and paste the results one by one.  You also have to at least give a glance at the expected results. So when you are testing for a larger enterprise or commercial application you are still iterating the same process which is much more exhausting than using a screenshot/snapshot test. 

The DOM snapshot, which captures the screenshot of the DOM at the moment the real result related to the expected result is being loaded, helps to inspect not only the UI component part but the coding part as well. 

On the other hand, component snapshot, vastly improve effortless testing practices, as it is storing the state as well as the contents are given out by components that are being tested. So after a closer inspection and pushing the snapshots onto the central repository, you can reuse those in getting fast yet accurate test results. All of these screenshots need to be updated after carefully going through them, but usually, you are supposed to update them when a testing flow is changed and the expected results are being changed. 

How to Perform Screenshot Testing using Cypress 

For the purpose of this demo let us use BrowserStack’s Dummy Site. 

The first thing you need to do is access the part of the application that you need to test and get the snapshot. For this example, let’s use the login page of the dummy site.

Let us add the snapshot npm module. This module must be added as a dev dependency using the command,

npm i -D @cypress/snapshot

After that, you need to add this add-on to cypress/support/command.js by inserting the line,

require('@cypress/snapshot').register()

This command will add the snapshot() command to be used. 

After that, you can start to script and run the test flow. For this particular scenario, let’s use the login button of the site. Here, let us take a snapshot of the Sign In button and store the snapshot. 

When you run the code with Cypress console you can verify the snapshot content by hovering or clicking on the snapshot in the runner. 

How the snapshot is captured 

How the snapshot captured is displayed in Cypress Console

Snapshot js content

Code Snippet :

/// <reference types="cypress" />


describe('Snapshot test with Cypress', () => {


  beforeEach(() => {



    cy.visit('https://bstackdemo.com')


  })



  it('Take the snapshot of a result', () => {



    /* In here the snapshot that is taken will be refered and accepted by tester and, only after that 

    we can use that snapshot as an comparison component for the test*/

    cy.visit('https://bstackdemo.com/')

    cy.get("#signin").click();

    cy.get("#login-btn").snapshot(); //This snapshot will be referred and compared everytime this runs

    cy.get("#login-btn").click();

  })

})

The repository for this simple can be found here.

Best practices for Screenshot Testing

There are some basic procedures that one must follow in screenshot testing. The most basic as well as the obvious one will be checking the resultant snapshot to check whether the expected criteria are met. That will be the first and foremost thing that you’ll have to check. 

After checking that task you can move on to the next task which will be clearing and updating the snapshot as necessary for the next test runs. As a practice, it is better if you always update the snapshots when the testing flows/scenarios are changing. Because, most of the time the expected results are getting changed and if you don’t track the latest snapshot correctly the tests will get failed. So always the tester must be aware of the state the result of the snapshot will, be so that iterative test runs can be used effectively in finding the Quality metrics related to the application. 

BrowserStack allows you to perform screenshot/snapshot testing. With Snapshot testing one can effectively reduce the time and effort involved in the testing process. and minimize the risk of in-prod failures along with non-functional issues that can be easily mitigated through continuous testing. When doing frontend testing automation, using snapshot testing along with the Cypress test runner has tremendous advantages.

Try Snapshot Testing using Cypress