How to automate visual reviews with Percy

Last updated January 10, 2018

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 commandsSetup 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 VARsENV VARs

Add the variables to the pipeline's Variables tab:

Variables tabVariables 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 detailsExecution details

You can add more actions to the pipeline, including conditional notifications that will let you know in case your tests have failed.

Share

About the Author
Alexander Kus

Alexander Kus

Customer Success Manager

A story-teller and conversation-lover, Alexander decided to invest his skills to help his friends at Buddy transform the cold language of patch notes into exciting narratives. Also: an avid gamer, hip-hop DJ, Liverpool FC fan, absentminded husband, and the father of two.

Buddy Makes Developers Happier

You use lots of tools to get web & app development done. Buddy creates more time in your day by helping you automate those tools.

Sign up for free with