Skip to main content

Integrate your Nightwatch tests with Percy

A guide to integrating your Nightwatch automated tests with BrowserStack Percy. Catch visual differences in your web application on time.

We highly recommend using our BrowserStack SDK for Percy integration.

This documentation applies to Percy Nightwatch SDK version 2.0.0 and above.

Integrate Percy with your test suite to run visual tests. To do that, follow these steps:

Create a Percy project
Sign in to Percy. In Percy, create a project of the type, Web, and then name the project. After the project is created, Percy generates a token. Make a note of it. You have to use it set your environment variable in the next step.

For details on creating a project, see Create a Percy project.

Set the project token as an environment variable
Run the given command to set PERCY_TOKEN as an environment variable:

Copy icon Copy snippet
Copy icon Copy snippet
Copy icon Copy snippet

To learn about environment variables in Percy, see Percy environment variables.

Install Percy dependencies
Install the components required to establish the integration environment for your test suite.

To install the dependencies, run the following command:

Copy icon Copy snippet

Update your test script

Import the Percy library to use the method and attributes required to take screenshots.

Add the path exported by @percy/nightwatch to your Nightwatch configuration’s custom_commands_path property:

Copy icon Copy snippet

The following is an example test using the browser.percySnapshot() command:

Copy icon Copy snippet

For other examples of how to write Nightwatch tests, check out the official Nightwatch guides.

The snapshot method arguments are:

Copy icon Copy snippet


To learn more, see Percy snapshot.

Run Percy
Run your tests using the percy exec command as shown below:

If you are unable to use the percy:exec command or prefer to run your tests using IDE run options, you can use the percy:exec:start and percy:exec:stop commands. To learn more, visit Run Percy.

Add the path exported by @percy/nightwatch to your Nightwatch configuration’s custom_commands_path property:

Copy icon Copy snippet

The following is an example test using the browser.percySnapshot() command:

Copy icon Copy snippet

For other examples of how to write Nightwatch tests, check out the official Nightwatch guides.

Congratulations!

You have successfully created your first build on Percy. To see the build with snapshots of your application, visit your project in Percy.
When you run another build with visual changes to your application, Percy takes new snapshots. You can then see the comparisons between the two runs on the new build.

Advanced topics

Percy Snapshot command

In the preceding steps, we used the Percy Snapshot command for capturing snapshots. Percy provides various configurations to use with Percy snapshot command. To learn more visit, Percy snapshot command.

Base build selection

By default, Percy uses the previous build for comparison however, you always have the option to configure the base build for comparison as needed. To learn more, visit base build selection logic.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy