Integrate App Percy using the BrowserStack SDK

The new BrowserStack SDK is your one-stop solution for all App Percy integration requirements.

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 AppPercySDK.screenshot(driver, name) method for testing your website.
At various predefined events, by using auto capture modes. See Screenshot Capture Modes for App Percy for details.

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

High-level integration steps

Create test

Create a test script, and if you require one, get it from App Automate.

Install SDK

Install the required BrowserStack SDK.

Set credentials

Set your BrowserStack credentials in the browserstack.yml file (username and access key).

Create configuration

In the browserstack.yml file:

Set percy: true.
Set a projectName.
After you run a test, an App Automate project and an App Percy project are created with the project name you set here.
If a App Percy project by the name you set in the browserstack.yml file already exists, your screenshots are added to the same project. However, if the name matches a Percy project, your visual tests do not run, and you see an error message in your terminal. Your functional tests still run as expected.
Set percyCaptureMode: auto.

Copy snippet

The sample browserstack.yml file above shows how to set the percy, the projectName, and the percyCaptureMode parameters.

auto and other automated capture modes are supported on specific testing frameworks, see Screenshot capture modes for App Percy.

BrowserStack SDK supports manual capture modes for all functional tests written in Java and JavaScript in any framework.

Set manual configuration

If you want to capture screenshots manually:

Set percyCaptureMode: manual in your SDK configuration file.
Import the BrowserStack Percy SDK in your test script.
Add the AppPercySDK.screenshot(driver, name) method at required points in your test script to get the screenshots you want. The following Java and JavaScript sample scripts illustrate these changes:

Copy snippet

Run test

Run the test script.

During the test, App Percy automatically captures relevant screenshots and adds them to the specified project. When you run your tests again, App 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 App Percy dashboard.

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

Screenshot capture modes for App Percy

For functional testing, there are a few alternative values you can set for the percyCaptureMode parameter, applicable across the following testing frameworks.

Jest
TestNG
Nunit - C#
Mocha

The table below lists and describes all the acceptable modes for the percyCaptureMode parameter:

App Percy screenshot capture mode	Description
`auto`	Automatically capture screenshots on common events such as screenshot, click, and sendKeys.
`testcase`	Automatically capture screenshots at the end of each test case.
`click`	Automatically capture screenshots on every click.
`screenshot`	Automatically capture screenshots on every driver.screenshot call.
`manual`	This gives you more control over the screenshots you want captured. When used, you have to add the `AppPercySDK.screenshot(driver, name)` method at required points in your test script.

If your framework is not currently supported, contact support.

Did this page help you?

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback

Is this page helping you?

Yes

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked

This page has exactly what I am looking for
This content & code samples are accurate and up-to-date
The content on this page is easy to understand
Other (please tell us more below)

Any additional feedback?

Thank you for your valuable feedback!