跳到主要内容

如何自动可视评审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 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.