Integrating visual testing into your CodeShip workflow

This post originally appeared on the CodeShip blog.

To make visual testing an easy part of your day-to-day workflow, Percy is designed to fit seamlessly into your existing CI and code review processes. Our CI/CD integrations — like our one with CodeShip — enable you to easily add visual testing to your existing tests, helping eliminate the risk of visual regressions on every single commit.

In this post, you’ll learn how to integrate Percy with CodeShip and how to get started with our visual testing and review platform.

Integrating Percy and CodeShip

There are just two steps to get Percy up and running alongside your CodeShip builds:

1. Start by configuring PERCY_TOKEN
2. Install one of our SDKs into your application

The end goal is to start creating snapshots and detecting visual diffs each time a CodeShip build runs.

Configuring your environment
Once you’ve created a free Percy account and a project to integrate with CodeShip, retrieve your PERCY_TOKEN API key. Configuring this project-specific environment variable will enable your CodeShip builds to trigger Percy builds.

Check out the environment variable configuration docs for CodeShip Pro and CodeShip Basic for more step-by-step guidance.

For CodeShip Pro customers utilizing parallelization to speed up build times, Percy pulls in your parallelization settings, grouping snapshots and visual changes that come from the same build.

Installing Percy and start running tests
After you’ve configured your CodeShip environment, you’re ready to integrate Percy into your tests and start running visual reviews. We support several integrations that make it easy to add visual tests to any front-end framework, test framework, component library or style guide.

Here are a few of our most popular SDKs:

• Percy for Storybook (Supports React, Vue, Angular, and more)
• Percy for Cypress
• Percy for Puppeteer
• Percy for Ember

With Percy integrated into your CI workflow and tests, you’re ready to get started. Every time a build is pushed up to CodeShip, a Percy build is also kicked off, rendering snapshots across browsers and screen sizes. If diffs are detected, your PR status will reflect the number of changes ready to be reviewed.

In the example above, pixels that have changed are highlighted in red “visual diffs.”

This workflow enables teams to see the visual impact of every code change with a single click and to know with complete confidence that they haven’t introduced visual regressions.

We’re thrilled to be CloudBees innovator partners — supporting integrations with both CodeShip and Jenkins — to make it faster and easier to incorporate visual reviews as part of every code review.

Want to learn more? Check out our upcoming webinar on March 20th to learn more about our CodeShip integration, and see a live visual testing demo. Register here.