Skip to main content
Transform your testing process with: Company-wide Licences, Test Observability & App Percy

Run a sample Percy build with TestCafe

Get hands-on experience on running Percy with TestCafe using our sample repository

Prerequisites

Before you start, ensure that you have the following installed:

With Percy, you can automate the visual testing of web applications, ensuring visual consistency across different releases and preventing visual regressions. This page demonstrates how to use Percy to run visual tests on a sample web application.

Run your Percy build

Follow these steps to clone the sample web application, run a build, and view the results of the visual comparison:

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

Copy icon Copy snippet

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:

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

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.

Copy icon Copy snippet

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.

Screenshot of the sample application on the Percy dashboard

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.

Copy icon Copy snippet

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

Copy icon Copy snippet

Generate the second build
Run the test script again.

Copy icon Copy snippet

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

Screenshot of the sample application on the Percy dashboard

Congratulations!

You’ve successfully run the sample Percy build. As you’ve seen, Percy helps you capture visual differences in your application that go undetected with functional testing alone.

This was just a sneak peek. Percy can do a lot more. To make the best out of it, integrate Percy with your test suite. To know more check out the related topics.

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