Visual Testing with Percy and Codeship Basic

At Codeship, we’re pleased to be able to integrate with several third-party products to make your CI/CD workflows that much smoother. For example, Percy, a visual testing platform, is one of our integration partners that adds extra functionality to your Codeship CI/CD pipelines. Here’s a brief overview of what you can accomplish when Codeship and Percy work together.

Codeship and Percy

Together, Codeship and Percy make a powerful combination — giving you full confidence in your app at every point of your development lifecycle.

Percy has first-class support for Codeship, supporting both Codeship Basic and Codeship Pro and automatically working with Codeship’s parallel test pipelines.

Visual Testing at a Glance

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 adds visual reviews to your Codeship tests and GitHub pull requests, helping you see every visual change to your application and catch UI bugs before they’re shipped. You can approve visual changes in one click as part of your team’s code review process.

Getting Started with Percy

To begin, you’ll need to add the two values to your project’s environment variables. Percy provides these when you create a new project inside their application:

• PERCY_TOKEN

• PERCY_PROJECT

Find them by navigating to Project Settings and clicking the Environment tab.

Integrating Percy with Codeship Basic

Let’s discuss a few examples of how to get started with Codeship and Percy and technologies like Ruby or Ember.

Codeship, Percy, and static sites

To use Percy with static sites on Codeship Basic, install the percy-cli gem. You can do this either in your setup commands or in the Gemfile itself. Install the gem with this command:

gem install percy-cli

Next, simply add the following command to your test commands:

percy snapshot directory_to_snapshot

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

Codeship, Percy, and Ruby

Want to integrate Percy with Codeship Basic on a Ruby project? Start by installing the percy-capybara gem in either your setup commands or your Gemfile. Install the gem with this command:

gem install percy-capybara

Finally, you need to add specific hooks to whatever test specs you may have (Rspec, Capybara, Minitest, etc). Percy’s documentation includes integration information for calling Percy from whatever test specs you’ve got.

Codeship, Percy, and Ember

Of course, we haven’t forgotten about Ember. For Ember projects, install the ember-percy package by adding the following to your setup commands:

ember install ember-percy

Now, simply add specific hooks into your test specs, which you can find in Percy’s documentation.

Conclusion

To add visual testing to your CI/CD pipeline, consider integrating Percy with your Codeship Basic projects. Interested in other third-party integrations for Codeship? We’ve got you covered with our integrations portal right here.