Integrate Percy with Selenium and Selenide
Learn how to integrate Selenium with Selenide 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 Selenide 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.
Install BrowserStack SDK using Maven Archetype
Maven Archetype provides a template to quickly configure your project. Run the following command on your terminal/command-line to add browserstack-java-sdk
dependency and browserstack.yml
file in your project.
Update your BrowserStack config file
In the browserstack.yml
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 thebrowserstack.yml
file already exists, your screenshots are added to the same project. However, if the name matches an App 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: manual
.
Below sample browserstack.yml
file shows how to set the percy
, the projectName
, and the percyCaptureMode
parameters.
Manually add Percy screenshot method to update test script
To manually capture screenshots, 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:
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.
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!