Testing for Visual Regressions with Percy

This post, based on personal experience, isn't sponsored (though we've collaborated with Percy on a sponsored video demonstrating its setup). Percy is a powerful visual review platform, and I highly recommend exploring it.

Imagine this common scenario: Unit tests pass, you merge code, and QA flags a UI issue—a button floating off-screen. You didn't touch that code, but you did change some CSS. Suddenly, you're questioning every UI element across various screen sizes and browsers. Testing manually is a monumental task.

Percy is the solution. It's invaluable for detecting unexpected design and layout changes. It's become essential in my workflow, and I'm sharing how it strengthens code and prevents errors. It integrates seamlessly with other tools and is easy to set up.

What is Percy?

Percy is a comprehensive visual review platform designed to detect visual regressions. Many code changes, especially CSS modifications, can introduce unforeseen design breaks. Percy provides confidence when modifying large stylesheets or legacy code, helping identify all UI elements affected by a single code change.

Setting up a Sample Site

We'll create a simple site for Percy testing using Gatsby and Netlify. While a deep dive into these technologies is beyond this scope, they simplify the setup process, eliminating complex server configurations.

Use a Netlify template and click "Deploy to Netlify." This creates a GitHub repo and deploys the app via Netlify. The result is a live site ready for Percy integration.

Automated Testing with CircleCI

Percy thrives in a CI environment. We'll use CircleCI to trigger tests on each commit.

1. Clone the Netlify-deployed repo (e.g., git clone https://github.com/PaulRyanStitcherAds/gatsby-starter-netlify-cms.git).
2. Sign up for CircleCI using your GitHub account.
3. Add your project in CircleCI, selecting Linux and Ruby (for percy-cli).
4. Create a .circleci/config.yml file with this configuration:

version: 2
jobs:
  build:
    docker:
      - image: circleci/ruby:2.4.1-node-browsers
    working_directory: ~/repo
    steps:
      - checkout
      - run:
          name: install dependencies
          command: |
            npm install
            gem install percy-cli
      - run:
          name: run tests
          command: |
            npm run build
            percy snapshot public

This installs percy-cli and runs Percy snapshots after the build. (Note: Ensure you don't mistakenly try installing percy-cli as an npm package.)

Push to the master branch to trigger a CircleCI build.

Connecting Percy to CircleCI

1. Create a Percy account using GitHub.
2. Create a new organization and project in Percy.
3. Obtain your Percy token from "Project Settings."
4. Add the token as an environment variable in CircleCI's "Build Settings."
5. Run Percy by pushing to master again. Percy will create snapshots. The initial build will show an empty comparison column because there are no previous snapshots.
6. Finally, link your repo to Percy through "Project Settings" -> "Install an integration," selecting your organization and installing for all repositories.

Leveraging Percy's Power

Now, let's demonstrate Percy in a code review workflow:

1. Create a branch (e.g., "changing-color").
2. Modify a CSS file (e.g., change a color).
3. Push the changes and create a pull request on GitHub.
4. CircleCI will run Percy, highlighting the visual changes.
5. Review the changes in Percy and approve them. This will mark the pull request as ready to merge.

Percy allows for efficient visual change review, preventing accidental UI regressions. This setup streamlines the UI testing process, saving significant time and effort.

The above is the detailed content of Testing for Visual Regressions with Percy. For more information, please follow other related articles on the PHP Chinese website!