How to perform Visual Regression Testing using Selenium in JavaScript

Visual Testing is a testing technique in which the user interfaces are validated for visual defects. It is performed to ensure the visual aspect of the website, such as styles, layouts, alignments, etc, are correct. 

Visual testing doesn’t test web application functionality. It compares the two screenshots – reference screenshots (also called baseline screenshots) and recent screenshots (also called actual screenshots) and produces the differences as the output.

Visual Regression testing ensures no visual defects after adding or fixing the new UI features. The functional automation framework can be extended to perform visual testing. Percy provides visual testing features and can be integrated with any automation tool. 

Selenium is an open-source test automation tool that supports multiple languages such as Java, C#, Javascript, etc. Using Selenium; you can build the framework to run visual tests by integrating Percy’s visual testing platform.

Why use Percy for Visual Regression Testing?

Percy is the visual testing platform that provides the feature to test the web application visually. It captures snapshots, makes pixel-by-pixel comparisons against baselines, and detects visual bugs in your UI with every commit

• Percy supports many automation frameworks, including Selenium for Javascript. 
• As traditional visual testing approaches compare the two screenshots, results will be less accurate and more false failures. 
• Percy has a robust visual testing algorithm that reduces false failures and provides accurate results.

How to Perform Visual Testing in Selenium

In the following step-by-step tutorial, let’s learn how to use Selenium and Javascript to execute the visual regression tests.

Steps for Selenium Visual Testing

Prerequisite:

Start by setting up Selenium Javascript framework 

Step1: Install Percy node packages

As you have already configured Selenium and required dependencies as part of the prerequisite step. Install the Percy node packages to integrate Selenium into Percy.

Install Percy CLI: The Percy CLI is a command line tool that takes care of visual test execution and communicates with Percy infrastructure to upload screenshots after test execution.

Install Percy CLI using the below command

npm i @percy/cli

Install Percy Selenium web driver SDK

The Percy provides SDKs for every tool; The Selenium SDK provides visual testing API or commands that can be used in our tests. In short, this is the dedicated library for Visual Testing using Selenium.

Install Percy Selenium SDK for Javascript

npm i @percy/selenium-webdriver

Step 2: Write Selenium Visual Tests

Let’s consider two scenarios below

Scenario 1:

Navigate to Browserstack home page

Verify for Visual Defects

Scenario 2:

Click on Pricing Page

Visually validate the Pricing page.

Considering the above two scenarios, we can have steps like the below.

1. Navigate to the Browserstack home page.
2. Add the Percy command to visually test the home page
3. Simulate the click on the Pricing menu
4. Once the page is loaded using the Percy command to verify the Pricing menu

Percy Selenium Visual Test Code

require('chromedriver')

const { Builder, By} = require('selenium-webdriver');

const percySnapshot = require('@percy/selenium-webdriver');

const {expect} = require('chai')

describe("Selenium Visual Test Demo", async function () {

    var driver;

    this.timeout(0);

    before(function () {

      driver = new Builder().forBrowser("chrome").build();

      driver.get("https://browserstack.com");

    })

    it("Should verify home page", async function () {

      const isLogoDisplayed = await driver.findElement(By.id('logo')).isDisplayed();

      expect(isLogoDisplayed).to.be.true;

      await percySnapshot(driver, 'Browserstack-Homepage');

    });



    it("Should verify Pricing page", async function () {

      await driver.findElement(By.css('li.pricing-menu-link')).click();

      const headerText = await driver.findElement(By.css('H1')).getText()

      expect(headerText).to.be.eq('Real device cloud of 20,000 + real iOS & Android devices, instantly accessible');

      await percySnapshot(driver, 'Pricing-Page');

      

    });

    after(async function() {

      await driver.quit();

    });

})

In the above code, there are two it() blocks, 

First, it() block takes the screenshot of the home page.

await driver.get("https://browserstack.com");

the driver.get() is used for navigating to the Browserstack home page, once it is navigated, we are ensuring that the Browserstack logo is displayed and the screenshot is taken using the following Percy command 

await percySnapshot(driver, 'Browserstack-Homepage');

In the second it() block we are verifying the Pricing page for visual defects. 

The driver.findElement().click is used for clicking on the Pricing menu from the home page, then it navigates to the Pricing page, we are ensuring that the header is displayed correctly and then the screenshot is taken for Visual validation using the Percy command

await percySnapshot(driver, 'Pricing-Page');

Step 3: Set the PERCY_TOKEN

Percy uploads all the screenshots to its infrastructure and then using visual testing algorithm it compares the screenshot. For this complex process Percy needs to identify your project, the PERCY_TOKEN uniquely identifies your project.

• Login to Percy 
• Navigate to Project settings
• Copy the PERCY_TOKEN
• Set the PERCY_TOKEN based on the command line tool you are using

//Linux and macOS terminal

export PERCY_TOKEN=<your_token>

//Windows command line tool

set PERCY_TOKEN=<your_token>

//Powershell tool

$env:PERCY_TOKEN ='<your_token>'

Step 4: Execute Percy Test

The execution command follows the below syntax:

npx percy exec -- <your functional test execution command>

In this tutorial, as part of the pre-requisite, you are setting up the Selenium NodeJS framework with Mocha so you can execute the Percy Visual test using the below command.

npx percy exec -- npx mocha <name-of-test.js

Once you enter the above command the test starts executing, and results will be shown in the command prompt.

The above command line output shows the Finalized build with the build URL, using this URL you can easily navigate to Percy’s build and view the detailed result.

If there is no Visual Difference, Percy shows the message “No Changes”

If there is any difference, then Percy shows the difference by highlighting it in red color.

Benefit of using Percy Visual Testing

• Percy supports mobile-based visual testing; you can enable Android/iOS devices by navigating to Percy Project Settings and choosing the options under Browser Management
• Percy supports CI integrations with tools like GitHub Actions, GitLab CI, Jenkins, Azure, CirecleCI, etc. which automates the Visual Testing Process.
• Review any visual changes online using Percy’s platform and you can request the changes instantly on the build page
• Share your builds by changing the Privacy settings to the public option inside the Project Settings. Which helps to share the reports with required stakeholders without any additional effort

Closing Notes

Visual Testing is the most challenging part of testing as manual visual testing is less accurate as it depends on the testers’ attention to detail. On the other hand, the automation tools are less accurate and still need manual review. Only a robust visual testing algorithm can provide an accurate result. 

• Percy is one such tool that has a sound visual testing algorithm in the backend and intelligently checks for visual differences. 
• Unlike other tools, Percy provides visual testing as a service, which brings all the features such as review, commenting, and approval part of the process online without spending on third-party tools. 
• The popular testing tools Selenium and Percy make an incredible visual testing framework without switching away from the functional testing framework.

Use Percy for Visual Testing