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
toauto
. - 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 thebrowserstack.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
.
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:
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.
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
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
Thank you for your valuable feedback!