Integrating Percy with CypressIO

Previously we saw that the snapshots are stored in a folder of cypress. Only one person can view and modify the base snapshots.

With the help of Percy, we can share our snapshots with many people. Percy will store all the snapshots on the server and anybody can access it. Anyone can view and update the snapshots so that everyone will get to know which is the correct snapshot of the webpage.

To work with Percy we have to create an account for Percy. To create the account visit website and click Start for free button.

We can also select other paid versions. In the free version, we can take 5000 snapshots for a month.

Now on the Signup page select the SIGN UP WITH BROWSERSTACK button.

Now select Sign In with Google button.

Now enter your credentials, check the box, and click continue.

After entering your credentials below UI will appear. Select Create new project.

Now give the project name as your wish and select Create Project.

After creating the project, the below UI will appear and copy the token which will be used in the terminal. With the help of this token cypress interacts with Percy.

Now install Percy by giving the below command in the VSCode terminal.

npm install @percy/cypress


After installing, give the below configuration in the support/command.js file

import '@percy/cypress'

Now in the plugins/index.js file give the below configuration

const percyHealthCheck = require("@percy/cypress/task")
module.exports = (on, config) => {

In the package.json file, if you wish you can redefine the command

"scripts": {
    "test": "percy exec -- cypress run"

Now in the terminal, give the below command with the respective token value. You can find the token value from your Percy account from the Project settings as below.

set PERCY_TOKEN="<token value>"


Example program:

import '@percy/cypress'
describe('Visual regression Testing with percy and cypress', () =>{
it("Should take perc snapshot",() =>{

Now execute the test by giving the below command.

npx percy exec -- cypress run
npx test

Output :

When the execution completed, visit your Percy account on the website and You will find a page like the below UI where the snapshots are created for the failed as well as passed tests. For the failed tests you won't find any snapshots if you open the snapshot.

When you open the unreviewed snapshot you will find the below UI where you can add a comment and approve the snapshot.

When you select approve the below dialogue box pop ups. select continue.

After that, the UI will change like the below image.

When you run the same program again you will find No changes snapshot which means that the snapshot is the same as the previous snapshot.

When you open the No changes snapshot you will find that snapshot is already approved automatically because you approved the first snapshot which is the same as the No changes snapshot.

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions