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.

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:

bash
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$$$$$$$$$

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...