Integrating Visual Testing into Your CodeShip Workflow

At Percy, our goal is to help teams build and deploy with the confidence that their applications look exactly as they should. Our visual testing and review platform provides insight into exactly what has changed in your UI—automatically on every code change.

To do this seamlessly, Percy is designed to work within your CI/CD workflow and integrates with your pull requests to alert you of detected visual changes.

In this post, you’ll learn how to get Percy set up with CloudBees CodeShip, and how our visual testing workflow works.

Integrating Percy and CodeShip

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

• Start by configuring PERCY_TOKEN

• 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 automatically 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.”

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.