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.

Step 1: Add pipeline

If you haven’t used Buddy before, sign up 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 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 Packages 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

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:

Add the variables to the pipeline’s 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.

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