Integrate Percy with WebdriverIO

Learn how to integrate WebdriverIO automated tests and Percy to catch visual differences in your website.

Prerequisites

Before you start, ensure that you have a BrowserStack Automate account using the BrowserStack SDK to integrate your test script.

To integrate your WebdriverIO based test suite with Percy using the BrowserStack SDK, follow these steps:

Set BrowserStack credentials

Save your BrowserStack credentials as environment variables. It simplifies running your test suite from your local or CI environment. You can export the environment variables for the Username and Access Key of your BrowserStack account or you can set it in the config file.

Copy snippet

Install or Upgrade BrowserStack SDK

Copy snippet

Update your WebdriverIO config file

In the WebdriverIO config file:

Set percy: true.
Set a projectName.
After you run a test, an Automate project and a Percy project are created with the project name you set here.
If a Percy project by the name you set in the WebdriverIO config file already exists, your screenshots are added to the same project. However, if the name matches an App 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.
There are other supported automated capture modes in the percyCaptureMode parameter. The table below lists and describes all the acceptable modes.

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 `PercySDK.screenshot(driver, name)` method at required points in your test script.

Below sample WebdriverIO config file shows how to set the percy, the projectName, and the percyCaptureMode parameters.

Copy snippet

Additonal configuration settings (Optional)

To manually capture screenshots alongside the auto mode, implement the following steps in your test script:

Import the BrowserStack Percy SDK in your test script.
Add the PercySDK.screenshot(driver, name) method at required points in your test script to get the screenshots you want.

Here’s an example:

Copy snippet

Run your test script

Congratulations!

You have successfully integrated Percy with BrowserStack SDK and created your first build. To see the build with snapshots of your application, visit your project in Percy.

When you run another build with visual changes to your application, Percy takes new screenshots. You can then see the comparisons between the two runs on the new build. You can access the Percy dashboard directly from the Automate dashboard.

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!