We’re excited to announce our new Puppeteer integration! You can now add Percy to your Puppeteer setup to kick off visual snapshots when and where you want them.

Using Cypress or Nightmare? We recently launched support for those test frameworks as well!

Percy for Puppeteer: Automated visual testing for Chrome

Puppeteer is a popular package created by the Google Chrome team to control Chrome and Chromium. You can use it to crawl and manipulate web pages, automate user actions, and more! Because of its flexibility, user-friendly API, and power, Puppeteer has also become a popular tool for creating and running end-to-end tests.

Percy now works with Puppeteer to send and render snapshots used for visual testing and reviews.

For a tutorial on getting started with Percy and Puppeteer, walk through our Puppeteer tutorial.

With our Puppeteer SDK, you can add Percy snapshots within your tests wherever you’d like visual coverage. When a snapshot is called, Percy will render a full page screenshot for visual testing.

It’s easy to get started!

For a more in-depth look at adding Percy snapshots to your Puppeteer tests, check out our Puppeteer documentation and tutorial.

1. Install @percy/puppeteerusing npm or yarn. For example:

npm install --save-dev @percy/puppeteer

2. Import percySnapshot()into your file:

const { percySnapshot } = require('@percy/puppeteer')

3. Call percySnapshot(page, <snapshotName>) where you want to add snapshots:

describe('Integration test with visual testing', function() {
  it('Loads the homepage', async function() {
    const browser = await puppeteer.launch()
    const page = browser.page() 
    await page.goto('http://localhost:8000')
    await percySnapshot(page, this.test.fullTitle())
  })
})

Optionally, you can add a hash to include responsive breakpoint widths at which you want to take snapshots.

4. Finally, wrap your test runner call in the percy exec -- command. This will start a Percy agent to receive snapshots and upload them to your Percy dashboard.

For example, if you’re using Jest for your tests, your new test command becomes:

percy exec -- jest

(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 regression testing!

We built this SDK–along with our new Cypress SDK and Nightmare SDK–in an effort to break down more barriers to accessing visual testing. This new generation of SDKs makes it easier for teams to integrate Percy with their existing test suites and workflows–no matter what they’re using. Stay tuned to see the next batch of SDKs we have in store for you!

We’d love to hear your feedback as we evolve and strengthen these SDKs! Drop us a line on Twitter or send an email to support@percy.io!

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. 🔥