How to automate visual reviews with Percy
Percy is a popular service that shows diffs between changes in the application. It integrates directly into your test suite, allowing for automated visual reviews on every push to Git – if only automated with Buddy.
In this example, we'll show you how to automate screenshot grabbing in Mocha/Chai tests of an Ember app.
You can use github.com/buddy-works/percy-demo that will work out-of-the-box.
Action used in this guide:
Step 1: Add pipeline
If you haven't used Buddy before, sign up for free with your GitHub/Bitbucket account or email. Select the repository with your tests and create a new delivery pipeline.
Set the trigger mode to 'On every push' so that it's executed on every change to the assigned branch.
Step 2: Configure action
Now it's time to configure and add the Node.js action – a Docker container in which we'll run our script with Percy. However, to make it work, we'll need to install a couple of things first. Switch to the Environment tab and paste the following:
apt-get update apt-get install -y wget --no-install-recommends wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' apt-get update apt-get install -y google-chrome-unstable --no-install-recommends rm -rf /var/lib/apt/lists/* apt-get purge --auto-remove -y curl rm -rf /src/*.deb
$$$$$$$$$
Setup commands
Step 3: Add argument
It is crucial that you add --no-sandbox
argument to testem.js
or the script will not work:
/* eslint-env node */
module.exports = {
test_page: 'tests/index.html?hidepassed',
disable_watching: true,
launch_in_ci: [
'Chrome'
],
launch_in_dev: [
'Chrome'
],
browser_args: {
Chrome: {
mode: 'ci',
args: [
'--no-sandbox',
'--disable-gpu',
'--headless',
'--remote-debugging-port=0',
'--window-size=1440,900'
]
}
}
};
Step 4: Add variables
The last thing is adding PERCY_TOKEN
and PERCY_PROJECT
variables to the pipeline. You can find them in your Percy's Project Settings:
ENV VARs
Add the variables to the pipeline's Variables tab:
Variables tab
Step 5: Run the pipeline
With everything in place, make a push to the selected branch and enjoy your changes immediately reflected on the screenshot.
Execution details
You can add more actions to the pipeline, including conditional notifications that will let you know in case your tests have failed.
Alexander Kus
Customer Success Manager
With Buddy even the most complicated CI/CD workflows take minutes to create
Sign up for Buddy CI/CD
Start a free trialTrusted by customers from 170+ countries