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

Your First Percy Build

“Hello Percy” - A simple program to illustrate visual testing using Percy

The “Hello Percy” program is a simple program that illustrates Percy’s visual testing feature. Use it to run your first Percy build. No framework required.

Prerequisites

Before you begin, make sure you have:

We use the snapshot command to create our first build.

Get started

Follow the below procedure to create a Percy project, generate a build, and view comparison results:

Install Percy CLI
Install the @percy/cli dependency.

Copy icon Copy snippet

Create a Percy project
Next, let’s create a Percy project:

a) Visit https://percy.io/.

b) Go to the dashboard and click Create new project.

c) Specify the Project Name.

d) Click Create Project.

To learn how to create a project in Percy, see Create a project.

After the project is created, a token is generated which identifies your project builds to Percy servers. See the following clip to identify the generated token:

Percy Token

Set environment variables
Export the Percy token environment variable.

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

This is often only configured in your CI environment, but to keep things simple configure it in your shell so that Percy is enabled in your local environment.

Generate first build

Let’s create a really simple HTML code and take a snapshot of the same to get things going.

a) Create an index.html file in your project folder with the following contents:

index.html
Copy icon Copy snippet

b) Create a snapshots.yml file, which identifies the snapshots to be taken to Percy in the generated build.

snapshots.yml
Copy icon Copy snippet

c) Run the build with the following command:

Copy icon Copy snippet

Generate second build

To demonstrate Percy’s visual testing quality, let’s introduce visual changes and generate the second build.

a) Make the following changes to line no. 51 of index.html:

Copy icon Copy snippet

b) Run the build.

Copy icon Copy snippet

Results

To view the visual comparison results, click the finalised build link as shown below:

Copy icon Copy snippet

You see the comparison between the first and the second builds: Percy - Build Results

Congratulations!!

You just completed your first visual testing with Percy comparison! You can make your own changes to the app and re-run the build to check visual changes reflected in Percy.

  • If you’re using some application framework, check out our SDKs for it.
  • If your app has a responsive DOM, or a different DOM for web and mobile, configure Percy’s SDKs to support the same. Read more

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