Integrating CodeShip With Percy Visual Testing

3 minute read

Because we don’t have a pull request identifier environment variable, the Percy integration is limited in it’s ability to generate screenshot comparisons over time.

About Percy

Percy is a visual testing tool that lets you take screenshots, monitor visual changes, and require team approval to these visual captures in an automated way as part of your CI/CD pipeline.

By using Percy you can easily test your UI without complex browser testing overhead.

Their documentation does a great job of providing more information, in addition to the setup instructions below.

CloudBees CodeShip Pro

Setting Your Percy Variables

You will need to add a value that Percy provides when you create a new project inside their application - PERCY_TOKEN - to the encrypted environment variables that you encrypt and include in your codeship-services.yml file.

Static Sites

To use Percy with static sites inside Docker images on CloudBees CodeShip Pro, you will need to install the percy-cli gem inside your images, either as part of a Gemfile or by adding the following command to the Dockerfile:

RUN gem install percy-cli

Note that this will require you to be building an image that contains both Ruby and Rubygems. If the image does not contain both of these, you will be unable to install the necessary percy-capybara gem.

From there, you will need to 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

Note that you can use multiple commands to take snapshots of multiple directories, and that the directories must contain HTML files.

Ruby

To integrate Percy with CloudBees CodeShip Pro on a Ruby and Docker project, you will want to install the you will need to install the percy-capybara gem inside your images, either as part of a Gemfile or by adding the following command to the Dockerfile:

RUN gem install percy-capybara

Note that this will require you to be building an image that contains both Ruby and Rubygems. If the image does not contain both of these, you will be unable to install the necessary percy-cli gem.

From there, you will need to add specific hooks to your Rspec, Capybara, Minitest, or any other test specs you may have. You can find specific instructions for calling Percy from your test specs at the Percy documentation.

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

Ember

To integrate Percy with CloudBees CodeShip Pro on an Ember and Docker project, you will want to install the ember-percy package into your application, typically via your package.json.

From there, you will need to add specific hooks in to your project’s test specs. You can find specific instructions for calling Percy from your test specs at the Percy documentation.

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

CloudBees CodeShip Basic

Setting Your Percy Variables

You will need to add a value that Percy provides when you create a new project inside their application - PERCY_TOKEN - to your project’s environment variables.

You can do this by navigating to Project Settings and then clicking on the Environment tab.

Configuration of Percy env vars

Static Sites

To use Percy with static sites on CloudBees CodeShip Basic, you will need to install the percy-cli gem, either in your setup commands or in your Gemfile itself. You can install the gem with the command:

gem install percy-cli

From there, you will need to add the following command to your test commands:

percy snapshot directory_to_snapshot

Note that you can use multiple commands to take snapshots of multiple directories, and that the directories must contain HTML files.

Ruby

To integrate Percy with CloudBees CodeShip Basic on a Ruby project, you will want to install the percy-capybara gem in either your setup commands or your Gemfile. You can install the gem with the command:

gem install percy-capybara

From there, you will need to add specific hooks to your Rspec, Capybara, Minitest, or any other test specs you may have. You can find specific instructions for calling Percy from your test specs at the Percy documentation.

Ember

To integrate Percy with CloudBees CodeShip Basic on an Ember project, you will want to install the ember-percy package by adding the following to your setup commands:

ember install ember-percy

From there, you will need to add specific hooks in to your test specs. You can find specific instructions for calling Percy from your test specs at the Percy documentation.