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:
- Basic knowledge of HTML
- Node 12+ with npm and git installed
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.
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:
Set environment variables
Export the Percy token environment variable.
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:
b) Create a snapshots.yml file, which identifies the snapshots to be taken to Percy in the generated build.
c) Run the build with the following command:
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:
b) Run the build.
Results
To view the visual comparison results, click the finalised build link as shown below:
You see the comparison between the first and the second builds:
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.
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
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!
