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 https://percy.io/ website and click Start for free button.
percy-step1-cypress

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

Now on the Signup page select the SIGN UP WITH BROWSERSTACK button.
percy-installation-step1-cypress

Now select Sign In with Google button.
percy-installation-2step-cypress

Now enter your credentials, check the box, and click continue.
percy-installation-step2-cypress

After entering your credentials below UI will appear. Select Create new project.
percy-installation-step4-cypress

Now give the project name as your wish and select Create Project.
percy-installation-step5-cypress

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

percy-installation-cypressio

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) => {
  on('task',percyHealthCheck)
}

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.
percy-installation-step6-cypressio

set PERCY_TOKEN="<token value>"

percy-token-cypressio

Example program:

import '@percy/cypress'
describe('Visual regression Testing with percy and cypress', () =>{
it("Should take perc snapshot",() =>{
    cy.visit("http://example.com/")
    cy.wait(1000)
    cy.percySnapshot();
})
})

Now execute the test by giving the below command.

npx percy exec -- cypress run
[OR]
npx test

Output :
percy-output-cypressio

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.
percy-snapshot-cypress

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

When you select approve the below dialogue box pop ups. select continue.
percy-approval-cypress

After that, the UI will change like the below image.
percy-after-approving-cypress

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.
percy-rerun-snapshot-cypress

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