We’re thrilled to announce our new Cypress integration! You can now easily drop Percy snapshots into your Cypress tests for end-to-end visual testing.

Percy for Cypress: End-to-end visual testing in three steps

Cypress, the open source test framework built for developers, makes it easy to set up and run end-to-end functional tests for anything that runs in a browser. Cypress is speedy, flexible, and great for ensuring your app is functioning across complex application operations, UI states, dynamic data, and mobile responsive views.

Percy picks up where Cypress leaves off, giving developers seamless access to visual regression testing within their existing Cypress scripts.

Our Cypress tutorial walks you through adding visual testing to an example application.

With this integration, you can now easily leverage your existing Cypress tests to add pixel-by-pixel visual comparisons on every change, to ensure your app not only works as intended but also looks as intended.

It’s easy to get started!

Install and import @percy/cypress

First, run:

npm install -- save-dev @percy/cypress

Then, at the top of cypress/support/command.js :

import '@percy/cypress'

2. Add Percy snapshots to your Cypress tests

describe('Integration test with visual testing', function() {

it('Loads the homepage', function() {

// Load the page or perform any other interactions with the app.

cy.visit(<URL under test>)



// Take a snapshot for visual diffing

cy.percySnapshot()

})

3. Wrap your test runner call with the percy exec -- command

This will start a Percy agent to receive snapshots from your Cypress tests and upload them to your Percy dashboard.

percy exec -- cypress run

(Note the spaces around the —- )

That’s it! Now, whenever CI runs, a snapshot of your app in that state will be uploaded to Percy for visual testing!

For a more in-depth look at adding Percy snapshots to your Cypress tests, check out our Cypress set up guide and Cypress tutorial.