Integrate with Percy: Overview

Welcome to the guide on integrating your test suite with Percy. Integrating your test suite with Percy offers automation for consistent testing, early feedback, and code stability. It supports integration for several web application frameworks, component libraries, end-to-end testing frameworks, and static sites. You can also build your own Percy integration.

There are several scenarios where integrating with Percy proves invaluable:

• Integrate visual testing with your existing functional and/or behavioral testing.
• Integrate visual testing alongside your current functional testing setup with BrowserStack Automate.
• Kickstart your visual testing automation journey.

Percy’s integration options cater to a wide range of testing needs, ensuring your projects maintain visual excellence and code integrity. This page presents a list of integration guides for all supported components, all of which Percy supports. Our step-by-step guide walks you through the process of seamlessly integrating your test suite with Percy.

High level steps

1. Install Percy.
2. Add snapshots.
3. Configure CI.

Percy Snapshot

Percy snapshot is the simplest way to initiate your visual testing journey with Percy. To learn more, see Take Percy Snapshots.

Web applications

• Ember
• Rails
• Capybara

Components and component libraries

• Storybook for React
• Storybook for Angular
• Storybook for Vue.js
• Storybook for Ember

End-to-end testing frameworks

• Ember
• Cypress
• TestCafe
• Capybara
• Puppeteer
• Playwright JS
• Protractor
• Nightmare
• Nightwatch
• WebdriverIO
• Selenium for Java
• Selenium for Ruby
• Selenium for Python
• Selenium for JavaScript
• Selenium for .NET

Static sites

• Gatsby
• Jekyll

Visual and functional test integration

• Percy on Automate

Build your own SDK

Integrating Percy visual testing into a new framework is simple using Percy CLI.

The @percy/cli npm package is our core SDK that provides the foundation for all other SDKs. It takes care of all the heavy lifting of common tasks such as authentication, environment detection, and uploading screenshots to your Percy project. To learn more, visit build your own SDK.

If you’re unsure about which SDK you should use or don’t see your technology represented, feel free to create a discussion

Next step

After you’ve installed and configured an SDK, the next step is to add Percy to your CI workflow and pull requests.