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.
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.
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:
bashapt-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
$$$$$$$$$
Image loading...
Step 3: Add argument
It is crucial that you add --no-sandbox
argument to testem.js
or the script will not work:
js/* 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:
Image loading...
Add the variables to the pipeline's Variables tab:
Image loading...
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.
Image loading...

Jarek Dylewski
Customer Support
A journalist and an SEO specialist trying to find himself in the unforgiving world of coders. Gamer, a non-fiction literature fan and obsessive carnivore. Jarek uses his talents to convert the programming lingo into a cohesive and approachable narration.