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!

1. 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 thepercy 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.

At Percy, it’s our goal to make visual testing work more seamlessly with the tools you’re already using. This integration is an exciting step towards that goal, and we look forward to introducing even more integrations soon. Stay tuned for our upcoming announcements by clicking ‘Follow’ below.

Percy is a visual testing platform that gives your team confidence in every visual change before it’s shipped. Learn more at https://percy.io.💜