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:

Node.js

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.

How to automate visual reviews with Percy

Step 1: Add pipeline

Step 2: Configure action

Step 3: Add argument

Step 4: Add variables

Step 5: Run the pipeline

Alexander Kus

Buddy Makes Developers Happier