This article is about General Codeship Configuration.

Using Percy Visual Testing

Estimated Reading Time: 4 mins

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.

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

Codeship Pro

Setting Your Percy Variables

You will need to add the two values Percy provides when you create a new project inside their application - PERCY_TOKEN and PERCY_PROJECT - 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 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 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 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 integration integration 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 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 integration integration for calling Percy from your test specs at the Percy documentation.

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

Codeship Basic

Setting Your Percy Variables

You will need to add the two values Percy provides when you create a new project inside their application - PERCY_TOKEN and PERCY_PROJECT - 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 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 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 integration integration for calling Percy from your test specs at the Percy documentation.

Ember

To integrate Percy with 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 integration integration for calling Percy from your test specs at the Percy documentation.

Need More Help?

Get in touch if you need more help, or post on Stack Overflow using the tag #Codeship.

  • Ask The Helpdesk A Question
  • Code Examples And Sample Projects
    • Was This Article Helpful?