Run a sample Percy build with Selenium and Java
Get hands-on experience on running Percy with Selenium and Java using our sample repository
Prerequisites
Before you start, ensure that you have the following installed:
- Node 14 or later
- Git
- Java 8 and Maven 3.6 or later
- ChromeDriver
Run your Percy build
Follow these steps to clone the sample web application, run a build, and view the results of the visual comparison:
Clone the sample application
Clone the example-percy-java-selenium
application, change the directory, and compile the sample application by running these commands:
You can explore the sample application by opening the src/main/resources/index.html
file.
Create a Percy project
To create a project, follow these steps:
- Sign in to Percy.
- In Percy, create a project of the type, Web.
- Name the project. After the project is created, Percy generates a token.
- Note down the token. You have to use it to set your environment variable in the next step.
For details on creating a project, see Create a Percy project.
Set the project token as an environment variable
Run the given command to set PERCY_TOKEN
as an environment variable:
To learn about environment variables in Percy, see Percy environment variables.
Generate the first build
In this step, we run the sample test script to take a few snapshots using the percy.snapshot
method. The sample application contains an App.java
file in which the method is called. The goal is to have a visual build with which to compare a later build.
On completion, you see logs from Percy confirming that the snapshots were successfully uploaded and a direct URL to the dashboard. There are no visual comparisons yet.
Modify the sample application
Edit the src/main/resources/index.html
file to introduce some visual changes.
In our example, we are adding inline CSS to bold the Clear Completed button on line 32 of the file.
Commit your changes
Commit the changes you made to the sample application by running the following command:
Generate the second build
Run the test script again.
This takes new screenshots of our modified application, uploads them to Percy, and compares them with the previous screenshots to show visual differences.
View results
- Open your project dashboard to view your builds.
- Open the second build to view the visual differences in comparison to the first build.
On the third pane, you see the screenshots from the first build on the left, and from the second, on the right.
Percy highlights what’s changed visually in the application. Use the options on the screen to review the changes on different browsers and widths.
Congratulations!
You’ve successfully run the sample Percy build. As you’ve seen, Percy helps you capture visual differences in your application that go undetected with functional testing alone.
This was just a sneak peek. Percy can do a lot more. To make the best out of it, integrate Percy with your test suite. To know more check out the related topics.
Related topics
- Integrate your test suite with Percy
- Choose your base build selection strategy
- View Percy build results
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!