Visual Testing with Percy and Codeship Pro

At Codeship, we’re pleased to be able to integrate with several third-party products to make your CI/CD workflows that much smoother. We’ve already discussed integrating Percy, a visual testing platform, with your Codeship Basic account. Here’s a brief overview of what you can accomplish when Codeship Pro and Percy work together.

Why Percy and Visual Testing

In a nutshell, Percy lets you take screenshots during your test suite and monitor visual changes, as well as get team approval on updates. And in keeping with the spirit of a CI/CD pipeline, it’s all automated.

Percy extends your CI suite and reduces manual QA time by automatically detecting visual changes on every test run. In the same way that CI gives you confidence for every release, the goal of visual testing is to give you confidence in the visual changes going into your application and the UIs that your users see every day. Percy integrates directly into your test suite and Codeship’s parallel test pipelines, providing fast and iterative feedback about visual changes.

Setting Your Percy Variables

To begin, Percy provides two values when you create a new project inside their application:

• PERCY_TOKEN

• PERCY_PROJECT

Add them to the encrypted environment variables that you include in your codeship-services.yml file.

Static Sites

To use Percy with static sites inside Docker images on Codeship Pro, install the percy-cli gem inside your images. You can do this either as part of a Gemfile or by adding this command to the Dockerfile:

RUN gem install percy-cli

Note that this will require you to build an image containing both Ruby and RubyGems. If the image doesn’t have both, you won’t be able to install the necessary percy-capybara gem.

From there, add the following command as a step or inside of a script in your codeship-steps.yml file:

- service: your_service
  command: percy snapshot directory_to_snapshot

A couple of notes: you can use multiple commands to take snapshots of multiple directories, and the directories must contain HTML files.

Integrating Percy with Codeship Pro and Ruby

To integrate Percy with Codeship Pro on a Ruby and Docker project, install the percy-capybara gem inside your images. You can do this either as part of a Gemfile or by adding the following command to the Dockerfile:

RUN gem install percy-capybara

As with static sites, the image you’re building must contain both Ruby and RubyGems. Without both, you won’t be able to install the necessary percy-cli gem.

From there, you’ll need to add specific hooks to your Rspec, Capybara, Minitest, or any other test specs you may have. You can find specific integration information for calling Percy from your test specs in the Percy documentation.

These test specs will be called via your codeship-steps.yml file.

Integrating Codeship Pro with Ember

To integrate Percy with Codeship Pro on an Ember and Docker project, install the ember-percy package into your application, typically via your package.json. From there, add specific hooks into your project’s test specs. Again, specific integration information for calling Percy from your test specs is available in the Percy documentation.

These test specs will also be called via your codeship-steps.yml file.

To add visual testing to your CI/CD pipeline, try integrating Percy with your Codeship Pro projects.