How to perform Visual Regression Testing using Selenium in JavaScript

Selenium can support visual regression testing when paired with visual comparison tools, helping catch unwanted UI changes beyond functional issues.

Using Selenium with JavaScript strengthens visual regression try by pairing potent UI automation with visual comparability tools to spot unexpected UI changes. This guide walks through how to do visual regression testing with Selenium in JavaScript.

Benefits of Visual Regression Testing with Selenium

is essential for maintaining UI quality in agile ontogeny. By integrating it withSelenium, you gain a powerful, machine-controlled approach to optical establishment.

• Former Bug Detection (): Catches visual inconsistencies and layout issuesas soon as they & # 8217; re coded, preclude costly bugs from progress toward deployment and reaching end-users.
• Guarantee Consistent UI:Ensures your website & # 8217; sUser Interface (UI) remains pixel-perfectand cohesive across every prey browser, gimmick, and screen resolution, protect your brand & # 8217; s ikon.
• Drastically Reduce Manual Effort: Automates the tedious procedureof visually inspecting countless web pages, disembarrass up QA teams to concentre on complex functional examination.
• Build Confidence in Deployments:Provides anobjective & # 8220; visual safety net, & # 8221;giving your team the certainty that new code changes haven & # 8217; t accidentally separate the existing aspect and feel of the application.

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

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

Prerequisite:

Start by

Step 1: Install Percy node packages

As you have already configured Selenium and take dependencies as portion of the prerequisite stride. Install the Percy node software to integrate Selenium into Percy.

Install Percy CLI:The is a dictation line tool that occupy care of optic exam 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 optic testing API or bid that can be used in our tests. In little, this is the consecrate 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 scenario below

Scenario 1:

Navigate to Browserstack place page

Verify for Visual Defects

Scenario 2:

Click on Pricing Page

Visually validate the Pricing page.

Considering the above two scenarios, hither 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 dictation 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 mapping () {var driver; this.timeout (0); before (function () {driver = new Builder () .forBrowser (`` chrome '') .build (); driver.get (`` https: //browserstack.com '');}) it (`` Should control home page '', async function () {const isLogoDisplayed = await driver.findElement (By.id ('logo ')) .isDisplayed (); anticipate (isLogoDisplayed) .to.be.true; await percySnapshot (driver, 'Browserstack-Homepage ');}); it (`` Should control 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 & amp; Android devices, instantly accessible '); await percySnapshot (driver, 'Pricing-Page ');}); after (async function () {await driver.quit ();});})

In the above code, there are twoit() 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 take 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 flaw.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

The driver.findElement () .click is used for clicking on the Pricing carte from the abode page, then it navigates to the Pricing page. It is ensured that the lintel is expose correctly and then the screenshot is taken for Visual establishment 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 operation Percy needs to identify your undertaking, the PERCY_TOKEN uniquely identifies your project.

• Login to
• Navigate to Project settings
• Copy the PERCY_TOKEN
• Set the PERCY_TOKEN found on the command line instrument you are expend

//Linux and macOS terminal export PERCY_TOKEN= & lt; your_token & gt; //Windows command line instrument set PERCY_TOKEN= & lt; your_token & gt; //Powershell tool $ env: PERCY_TOKEN = ' & lt; your_token & gt; '

Step 4: Execute Percy Test

The execution dictation follows the below syntax:

npx percy exec -- & lt; your functional examination execution command & gt;

In this tutorial, as part of the pre-requisite, you are setting up the so you can execute the Percy Visual test using the below bidding.

npx Hotspur exec -- npx mocha & lt; name-of-test.js

Once you enter the above dictation the trial starts executing, and results will be shown in the bidding prompt.

The above command line yield shows the Finalized form with the flesh URL, using this URL you can easily navigate to Percy & # 8217; s build and regard the detailed result.

If there is no Ocular Difference, Percy shows the substance & # 8220; No Changes & # 8221;

If there is any deviation, so Percy evidence the difference by spotlight it in red color.

Talk to an Expert

Tools and Libraries for Visual Regression Testing with Selenium

Tools and libraries for visual regression testing with Selenium automatise UI comparison, discern optic changes across browsers and devices. They enhance Selenium by catching design issues early and assure ordered, high-quality interfaces throughout development.

1. BrowserStack Percy

is an AI-powered visual testing platform plan to automatise visual regression testing for web applications, ensure flawless user interfaces on every code commit.

Integrated into CI/CD grapevine, Percy observe meaningful layout shifts, styling issue, and content changes with advanced AI, significantly reducing false positive and cutting down review time for fast, confident releases.

: 

• AI-Powered Accuracy:and Intelli-ignore filter noise from brio, banners, and anti-aliasing, reducing mistaken positive.
• :Highlights key UI changes, adds open explanations, and speeding blessing by up to 3x.
• No-Code Optic Monitoring:Scan grand of URLs across 3,500+ browsers/devices, schedule or induction scans, and ignore dynamic country.
• Flexible Environment Coverage:Compare staging vs. product, analyze story, and test authenticated or local pages.
• Wide Ecosystem Support:Works with major frameworks, CI tools, and SDKs for unseamed setup and scaling.

is BrowserStack ’ s AI-powered visual testing platform for native mobile apps on iOS and Android. It runs tests on a cloud of existent devices to secure pixel-perfect UI consistence, while AI-driven sound handling of dynamic elements helps reduce flaky tests and mistaken positive.

Pricing

• Free Plan:Available with up to 5,000 screenshots per month, ideal for getting begin or for small projection.
• Paid Plan:Starting at $ 199 for advanced features, with custom-made pricing available for enterprise plan.

2. Applitools Eyes

Applitools Eyes uses AI-powered computer vision to mimic human eye perception, providing accurate visual proof across browsers and devices. It offers wide integrations and greatly reduces mistaken positive through innovative algorithms.

Key Features:

• AI-driven visual validation
• Cross-browser and gimmick support
• Advanced image comparison
• Integrates broadly with test frameworks

Good For: Enterprises needing highly accurate AI optical examination.
Can not: Fully automatise without manual baseline approvals; costly for pocket-size teams.

3. SeleniumBase (Visual Testing Module)

SeleniumBase is a Selenium extension that provides built-in visual examination with screenshot comparison and layout difference detection. It is open-source and straightforward for combining functional and elementary visual test.

Key Features:

• Screenshot comparison & amp; layout detection
• Seamless Selenium integration
• Multi-browser support
• Open-source and easygoing setup

Best For: Developers wanting basic visual tests within Selenium handwriting.
Can not: Match AI truth or handle complex UI diffs good.

4. AShot

AShot is an open-source Java library that captures element-level and full-page screenshots within Selenium tests. It supports image sewing and detailed difference highlighting for Java-based optical validations.

Key Features:

• Element and full-page screenshot capture
• Selenium integration for Java trial
• Image stitching & amp; diff highlight
• Elaborated regression reports

Best For: Java squad needing customizable screenshot testing.
Can not: Provide AI noise reduction or cross-browser consistency handling.

5. Galen Framework

Galen Framework center on automatise layout and responsive design testing, verify element positioning and alignment across different screen sizes. It habituate a domain-specific language for test specs and integrates with Selenium Grid for cross-browser testing.

Key Features:

• Layout and responsive designing validation
• Human-readable test spec language
• Cross-browser testing with Selenium Grid
• Detailed HTML reports with screenshots

Best For: Web layout and responsive design testing.
Can not: Detect pixel-level optic differences or do AI-based validation.

6. Needle

Needle is a Python-based visual regression puppet integrating with Selenium and nose, focusing on CSS and element positioning accuracy. It captures screenshots of webpage share and compares them against a baseline for regression detection.

Key Features:

• Screenshot comparison of webpage part
• CSS and element perspective validation
• Supports multiple WebDrivers
• Customizable viewport sizes

Good For: Python teams verifying CSS and layout provide.
Can not: Perform cross-device rendering or AI-driven disturbance reduction.

Best Practices for Conducting Visual Testing Using Selenium in JavaScript

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

• Since Selenium does not come with built-in visual, you can integrate your examine efforts with full-bodied visual testing instrument like for advanced picture comparisons.

• For easier trailing and body, make baseline images betimes on and save them in version control.
• Do optimize screenshot seizure. Mask active elements like ads and timestamps to prevent mistaken positives, capture full Page, and make certain viewport sizes are consistent.
• Run across diverse browser to ensure consistent working of your apps across diverse browser.
• Automate image compare to spot visual regressions efficiently.
• Integrate your visual tests with your pipeline via creature like, etc. to detect topic early on.

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

Why use Percy for Visual Regression Testing?

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

• Percy back many automation frameworks, includingSelenium for Javascript.
• As traditional optical testing attack compare the two screenshots, results will be less accurate and more false failure. Percy has a rich visual testing algorithm that reduces false failures and provides accurate results.
• Percy supports mobile-based ocular testing; you can enableAndroid/iOS devicesby navigate to Percy Project Settings and choosing the options under Browser Management
• Percy supportsCI integrationswith tools like GitHub Actions, GitLab CI,, Azure,, etc. which automatise the Visual Testing Process.
• Review any visual changes online using Percy ’ s platform and you can request the change straightaway on the build page
• Share your builds by changing the Privacy settings to the public choice inside the Project Settings. Which helps to share the story with required stakeholders without any additional effort

Conclusion

is the most challenging part of screen as manual visual testing is less accurate as it calculate on the testers & # 8217; attention to detail. On the other hand, the automation puppet 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 ocular try algorithm in the backend and intelligently tab for visual differences.
• Unlike other tools, Percy provides visual testing as a service, which brings all the lineament such as review, commenting, and approving part of the operation online without spending on third-party instrument.
• The popular examination tools Selenium and Percy make an incredible visual examination fabric without switching away from the functional testing model.

Useful Resources for Visual Testing

Related Guides