How to perform Visual Regression Testing using Selenium in JavaScript

Visual regression testing is a process that helps you verify that the visual components of a web application are consistent without any unexpected changes after updates or code modifications.

Leveraging Selenium in Javascript makes this process more powerful. It combines Selenium’s automation functionalities with visual comparison tools to correctly identify unexpected changes in UI.

In this article, learn how to perform visual regression testing using Selenium in Javascript.

How to Perform Visual Testing using Selenium in Javascript [With Example]

Learn how to use Selenium and Javascript to execute the visual regression tests with the step-by-step tutorial given below:

Prerequisite:

Start by setting up Selenium Javascript framework 

Steps for Selenium Visual Testing

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

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, here are the steps to follow:

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, it is ensured 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 the Pricing page is verified to ensure there are no 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. It is ensured 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.

Talk to an Expert

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

Best Practices for Conducting Visual Testing Using Selenium in JavaScript

Here are some best practices you can follow to successfully conduct visual testing using Selenium in Javascript:

• Since Selenium does not come with built-in visual testing features, you can integrate your testing efforts with robust visual testing tools like Percy for advanced image comparisons.

• For easier tracking and consistency, create baseline images early on and save them in version control.
• Do optimize screenshot captures. Mask dynamic elements like ads and timestamps to prevent false positives, capture full pages, and make sure viewport sizes are consistent.
• Run cross-browser tests across diverse browsers to ensure consistent working of your apps across diverse browsers.
• Automate image comparisons to spot visual regressions efficiently.
• Integrate your visual tests with your CI/CD pipeline via tools like Jenkins, Circle CI etc. to detect issues early on.

• Validate the expected design changes, maintain a clear changelog and only then update baseline images.

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.

Conclusion

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

Useful Resources for Visual Testing

• How to capture Lazy Loading Images for Visual Regression Testing in Cypress
• How to Perform Visual Testing for Components in Cypress
• How to run your first Visual Test with Cypress
• How Visual Diff Algorithm improves Visual Testing
• How is Visual Test Automation changing the Software Development Landscape?
• How does Visual Testing help Teams deploy faster?
• How to perform Visual Testing for React Apps
• How to Run Visual Tests with Selenium: Tutorial
• How to reduce False Positives in Visual Testing?
• How to capture Lazy Loading Images for Visual Regression Testing in Puppeteer
• How to migrate your Visual Testing Project to Percy CLI
• Why is Visual Testing Essential for Enterprises?
• Importance of Screenshot Stabilization in Visual Testing
• Strategies to Optimize Visual Testing
• Best Practices for Visual Testing
• Visual Testing Definitions You Should Know
• Visual Testing To Optimize eCommerce Conversions
• Automate Visual Tests on Browsers without Web Drivers
• Appium Visual Testing: The Essential Guide
• Top 17 Visual Testing Tools