Run a sample Percy build with TestCafe

Clone the sample application
Clone the example-percy-testcafe application, change the directory, and compile the sample application by running these commands:

You can explore the sample application by opening the src/main/resources/index.html file.

Create a Percy project
To create a project, follow these steps:

1. Sign in to Percy.
2. In Percy, create a project of the type, Web.
3. Name the project. After the project is created, Percy generates a token.
4. Note down the token. You have to use it to 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:

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

Generate the first build
In this step, we run the sample test script to take a few snapshots using the percy.snapshot method. The sample application contains an file in which the method is called. The goal is to have a visual build with which to compare a later build.

On completion, you see logs from Percy confirming that the snapshots were successfully uploaded and a direct URL to the dashboard. There are no visual comparisons yet.

Modify the sample application

Edit the src/main/resources/index.html file to introduce some visual changes. In our example, we are adding inline CSS to bold the Clear Completed button on line 32 of the file.

Commit your changes

Commit the changes you made to the sample application by running the following command:

Generate the second build
Run the test script again.

This takes new screenshots of our modified application, uploads them to Percy, and compares them with the previous screenshots to show visual differences.

View results

1. Open your project dashboard to view your builds.
2. Open the second build to view the visual differences in comparison to the first build.

On the third pane, you see the screenshots from the first build on the left, and from the second, on the right.

Percy highlights what’s changed visually in the application. Use the options on the screen to review the changes on different browsers and widths.