Your first Percy build
Your first percy build
This page talks about
Introduction
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
- Basic knowledge of HTML
- Node 12+ with npm
- git
Note: We use the snapshot command to create our first build. CLI
Get started
Follow the below procedure to create a Percy project, generate build & view comparison results.
1) Install Percy CLI.
Install the @percy/cli dependency.
$ npm install @percy/cli
2) Create a Percy Project.
Let’s create a new Percy project in order to generate builds. After we generate the first build, we will introduce a few visual changes in the application & generate the second build. Post-build generation, we will compare both builds to view the visual comparison results.
a) Visit https://percy.io/.
b) Go to dashboard & click "Create new project".
c) Specify the "Project name".
d) Click "Create Project".
After the project is created, a token is generated which will identify your project builds to Percy servers. See the following clip to identify the generated token.
3) Set environment variables
Export the token environment variables.
Unix
$ export PERCY_TOKEN="<your token here>"
$ export PERCY_BRANCH="<your git branch>"
Windows
$ set PERCY_TOKEN="<your token here>"
$ set PERCY_BRANCH="<your git branch>"
# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
$ $Env:PERCY_BRANCH="<your git branch>"
Note: This is often only configured in your CI environment, but to keep things simple we'll configure it in your shell so that Percy is enabled in your local environment.
4) Generate first build
Let’s create a really simple HTML code and take a snapshot of the same to get things going.
a) Create a index.html file in your project folder with the following contents:
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
body {
font-family: system-ui;
max-width: 500px;
padding: 20px;
margin: 20px auto;
box-shadow: 0 10px 10px #eee;
}
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin: 8px 0;
padding: 12px 20px;
background-color: #995dbb;
color: white;
border-radius: 4px;
}
li.done {
opacity: 0.4;
text-decoration: line-through
}
h1 {
color: rgba(0,0,0,0.78);
font-weight: normal;
margin: 10px auto;
text-align: center;
}
</style>
</head>
<body>
<h1>hello percy!</h1>
<input type="text" id="new-task" name="new-task" placeholder="What do you want to do?">
<ul id="task-list">
<li>Wake Up</li>
<li>Exercise</li>
<li>Eat</li>
</ul>
</body>
</html>
b) Create a snapshots.yml file, which identifies the snapshots to be taken to Percy in the generated build.
serve: .
snapshots:
- name: Home Page
url: /index.html
c) Run the build with the following command.
$ npx percy snapshot snapshots.yml
5) Generate second build
To demonstrate Percy’s visual testing quality, let’s introduce visual changes & generate the second build.
a) Make the following changes to line no. 51 of index.html
<li class="done">Exercise</li>
b) Run the build.
$ npx percy snapshot snapshots.yml
6) Results
To view the visual comparison results, click on the finalised build link as shown below:
[percy] Percy has started!
[percy] Snapshot taken: HelloPercy
[percy] Finalized build #2: https://percy.io/org/proj/builds/888888
You will see the comparison between first and second build highlighting the visual changes as follows:
Finished! 😀
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.
Note:
Updated 4 months ago