Integrate App Percy with Appium and WebdriverIO
Learn how to integrate Appium with WebdriverIO automated tests and App Percy to catch visual differences in mobile apps.
To integrate your WebdriverIO based test suite with App Percy using the BrowserStack SDK, follow these steps:
Prerequisites
Before you start, ensure that you have the following:
- A BrowserStack App Automate account using the BrowserStack SDK to integrate your test script
- An application is uploaded on App Automate, and an app URL is generated. Utilize the generated app URL in the BrowserStack configuration file as the
appparameter
Currently, the BrowserStack SDK supports up to WebdriverIO version 8.
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.
Install or Upgrade BrowserStack SDK
Update your WebdriverIO config file
In the WebdriverIO config 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 theWebdriverIOconfig file already exists, your screenshots are added to the same project. However, if the name matches a Percy project, your visual tests will continue to run, but an error message will appear in your logs. Your functional tests still run as expected. -
Set
percyCaptureMode: auto.
There are other supported automated capture modes in thepercyCaptureModeparameter. The table below lists and describes all the acceptable modes.
| 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.screenshotApp(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.
If you face issues with percyCaptureMode, run npm install @wdio/browserstack-service --save-dev and try again.
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
percy.screenshotApp(driver, "My Screenshot")method at required points in your test script to get the screenshots you want.
Here’s an example:
Run your test script
Your test suite is now ready to run on BrowserStack. Use the commands defined in your package.json file to run the tests.
Congratulations!
You have successfully integrated App 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, App Percy takes new screenshots. You can then see the comparisons between the two runs on the new build. You can access the App Percy dashboard directly from the App Automate dashboard.
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!