We’re excited to announce our new NightmareJS integration! You can now add Percy snapshots to your Nightmare tests for automated visual testing.

Visual testing in Nightmare with Percy

Nightmare, the high-level browser automation library built by Segment, automates and mimics user actions within browsers. Now, with Percy, you can utilize Nightmare not only for driving end-to-end testing but to kick off automated visual testing as well!

Walk through our Nightmare tutorial to learn how to add visual tests to your Nightmare tests.

With our Nightmare 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–across different browsers and responsive widths–for visual testing.

It’s easy to get started!

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

npm install --save-dev @percy/nightmare

2. Import percySnapshot() into your test file:

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

3. Call nightmare.use(percySnapshot(...) where you want to add snapshots:

describe('Integration test with visual testing', function() {
  it('Loads the homepage', function() {
    nightmare
    .goto(<URL under test>)
    .use(percySnapshot('Homepage snapshot')
    // Any other test actions
    .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.

For example, if you are using Mocha for your tests, your new test command becomes:

percy exec -- mocha

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

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

At Percy, it’s our goal to make visual testing work more seamlessly with the tools you’re already using. This integration, in addition to last week’s Cypress SDK launch, is an exciting step towards that goal.

We’d love to hear your feedback! Drop us a line on Twitter or send an email to support@percy.io and stay tuned for our upcoming announcements!

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