Integrate Percy using available SDKs

BrowserStack now has a new SDK that simplifies the process of integrating with Percy. As before, you can test your web or mobile application visually using Percy. To integrate your visual and functional testing processes for your website, run your Percy tests on BrowserStack’s Automate. Or, if you are an existing Automate user and would like to try Percy, you can do that too. The same SDK fulfils all needs.

With the BrowserStack SDK, you can take screenshots of your application:

• Automatically, by setting percyCaptureMode to auto.
• At specific points during a test, by calling the screenshot method. For example, you can call the PercySDK.screenshot(driver, name) method for testing your website.
• At various predefined events, by using auto capture modes.

During the test, Percy automatically captures relevant screenshots and adds them to the specified project. When you run your tests again, Percy captures the same screenshots again and if it detects visual changes, it highlights those changes for your review. You can see the results in the Percy dashboard.

Check out the video below to get an overview of Percy using BrowserStack SDK:

To learn how to integrate your test suites using the BrowserStack SDK, visit Automate.

High-level integration steps

1. Create a test.
2. Install the required BrowserStack SDK.
3. Set percy: true in the configuration file.
4. Run the test.

End-to-end testing frameworks

• JestJS
• TestNG
• Nunit - C#
• Mocha JS
• WebdriverIO
• Cucumber-TestNG
• XUnit
• SpecFlow
• Java
• JUnit4

• JUnit5

• Serenity
• Selenide
• JBehave

If your framework is not currently supported, contact us.

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.