Visual Testing using Percy.io + Selenium

https://percy.io/

In this article I’d like to share how we can integrate our Selenium Tests with UI visual testing tool, Percy.io.

Percy provides insight into visual UI changes which up until now can only be done by manual testers. Automating the process will allows us to save time and reduce error during UI review process on each and every code change.

Percy supports integration with several application frameworks, component libraries, and other end-to-end testing frameworks such as: Cypress, WebdriverIO, Puppeteer, etc.

Before we start installing and configuring Percy for our test project. Create Percy account and once you’re logged in, create new project.

Installation

1. Download and install Node.js and NPM.
2. npm install @percy/cli

npm install --save-dev @percy-cli

Implementation

1. Add percy-java-selenium to your project dependencies, depending on your build system. For Maven you can use:

<dependency>
  <groupId>io.percy</groupId>
  <artifactId>percy-java-selenium</artifactId>
  <version>1.0.0</version>
</dependency>

2. Add percy.snapshot into your test script, for example:

import io.percy.selenium.Percy;
public class Example {
  private static WebDriver driver;
  private static Percy percy;
@Test
public void sampleTest() {
    FirefoxOptions options = new FirefoxOptions();
    options.setHeadless(true);
    driver = new FirefoxDriver(options);
    percy = new Percy(driver);
    driver.get("https://example.com");
    percy.snapshot("Test Page");
  }
}

3. Every time you run percy exec a new build will be created within your Percy project and snapshots will be added into its related build. In order to do so, run Percy using the Project’s token which you can get from Project Settings.

4. Execute the Percy and test command, for example:

> set PERCY_TOKEN=your-project-token-here
> npx percy exec -- mvn clean test -Dtest=MyTest

5. Once test execution done, a new build will be created and you can review the snapshots taken in your Percy project. The snapshots from the first build will be used as the base to compare with your upcoming builds whether the UI is being displayed as expected or not.

Image from https://percy.io/