We now support Nightwatch! With our newest SDK, you can add Percy snapshots to your Nightwatch.js tests for automated visual testing.

Visual testing in Nightwatch.js with Percy

Nightwatch.js is an easy-to-use Node.js based end-to-end (e2e) testing solution for browser-based apps and websites. With this integration, anyone using Nightwatch.js to run their e2e tests can add Percy snapshots with ease.

Percy adds an extra level of confidence to e2e suites, generating and comparing snapshots across your UI automatically. When snapshots are called from within your Nightwatch.js script, Percy renders full page screenshots across different browsers and responsive widths for visual regression testing.

It’s easy to get started!

1. Install the @percy/nightwatch npm package:

npm install --save-dev @percy/nightwatch

2. Add the path to the percySnapshot command to the custom_commands_path array in your Nightwatch configuration: const percy = require('@percy/nightwatch') and custom_commands_path: [ percy.path ].

3. Call browser.percySnapshot() from your tests wherever you want to save a snapshot:

'Loads the app': function(browser) {
  browser
  .url('http://example.com')
  .percySnapshot()
  .end()
}

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. Your new test command becomes:

percy exec -- nightwatch

Note the spaces around --.

That’s it! This integration, along with our CI/CD integrations has the power to add visual testing and reviews to your workflow in no time. Whenever CI runs, a snapshot of your app in that state will be uploaded to Percy for visual regression testing!

This integration also supports responsive testing. When you call browser.percySnapshot(), you have the option to include the widths and minHeight at which you want to take snapshots.

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

We support other JavaScript test frameworks as well — Cypress, Nightmare, Puppeteer, and Protractor! For a full list of our SDKs, visit our documentation and stay tuned for upcoming announcements.

We’d love to hear your feedback! 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. 🦔