Visual Regression Testing Using Selenium AShot: A Step-by-Step Approach

The other part of ensuring the UI of an application remains consistent is to ensure that the application works. Visual changes, even minor ones made unintentionally, can have an impact on the user experience and brand identity. Selenium, as a popular browser automation framework, combined with AShot, makes it easy to perform visual testing by capturing screenshots and comparing them.

This blog posts how to set up visual tests using Selenium AShot. I will discuss how one can take screenshots of the full page and an element-specific, as well as capture baseline images and update it with UI changes to detect changes where least expected.

Additionally, we’ll discuss how to fine-tune comparisons using AShot’s image comparison techniques, such as tolerance levels, ignored areas, and pixel-diff configurations. By the end, you’ll be equipped with the knowledge to integrate visual testing into your Selenium workflow, ensuring UI consistency across different builds and releases.

What is Visual Testing?
Visual Testing is a method of validating a web or mobile application’s user interface (UI) appearance by comparing visual elements between different versions or test runs. Unlike functional testing, which verifies if the system behaves as expected, visual testing ensures that the UI looks correct and detects unintended changes caused by CSS updates, layout shifts, or UI regressions.

Key Aspects of Visual Testing:

• Detecting pixel-level differences between UI states
• Validating color, font, alignment, and spacing
• Ensuring responsive design works across different screen sizes
• Comparing baseline images vs. new UI screenshots

Why is Visual Testing Important in UI Automation?

Traditional UI automation tests (e.g., Selenium) verify elements based on attributes like id, class, or text, but they do not check how the UI visually appears to end-users.

Benefits of Visual Testing:

• Prevents UI Regressions: Detects unintended layout or styling changes.
• Enhances User Experience: Ensures consistency across different browsers and devices.
• Reduces Manual Effort: Replaces tedious manual visual checks with automation.
• Works with Any UI Automation Framework: Can be integrated into Selenium, Cypress, Playwright, etc.
• Validates Dynamic Content: Supports scrollable pages, popups, overlays, and animations.

Challenges of Traditional Functional Testing
Traditional automation frameworks (like Selenium, WebdriverIO, or Cypress) focus on verifying functionality but ignore UI appearance. This leads to issues such as:

• Invisible Bugs: Tests might pass even if elements overlap, are cut off, or have incorrect colors.
• Dynamic UI Elements: Visual changes due to different screen resolutions or browsers are hard to catch.
• CSS Styling Changes: Minor updates in CSS (like padding/margin changes) might break UI but won’t fail functional tests.
• Inconsistent Layouts: UI misalignment due to font, viewport size, or responsiveness can go unnoticed.

Example:
Imagine an e-commerce checkout button shifts slightly due to a CSS update.

• Functional test: Passes because the button is still clickable.

Visual test: Fails because the button is misaligned or cut off.

Introduction to Selenium AShot

What is AShot?
AShot is an open-source Java library used for capturing, comparing, and processing screenshots in Selenium-based automation. Unlike Selenium’s built-in getScreenshotAs() method, which captures only the visible viewport, AShot can:

• Capture full-page screenshots (including scrollable areas)
• Take screenshots of specific elements instead of the entire page
• Perform image comparison to detect UI changes
• Handle dynamic content, ignored areas, and resizing.

Why Use AShot Over Selenium’s Default Screenshot Method?

Example Use Case:

Imagine testing a website where a banner image updates dynamically. Selenium’s basic screenshot method won’t detect changes in that image. However, AShot can compare screenshots and highlight pixel-level differences.

How AShot Works for Image Comparison
AShot captures images using Selenium WebDriver and processes them through Java AWT (Abstract Window Toolkit). It enables pixel-by-pixel image comparison, making it highly effective for visual regression testing.

Steps of Image Comparison in AShot:

Capturing Screenshots

• AShot takes a screenshot of the entire page, a specific element, or a viewport.
• Uses the takeScreenshot(WebDriver driver) method.
• Supports full-page scrolling screenshots (especially useful for long web pages). Processing and Normalisation
• Converts images into BufferedImage format.
• Applies scaling, cropping, and transparency adjustments if required.
• Can ignore anti-aliasing effects or minor UI shifts to reduce false positives. Performing Image Comparison
• Compare the baseline image (expected UI state) with the newly captured screenshot.
• Uses pixel-by-pixel matching with configurable tolerance levels.
• Ignore specific areas (dynamic elements like timestamps, animations, etc.). Highlighting Differences
• Generates an output image with highlighted differences (commonly in red).
• Helps in debugging by clearly marking UI deviations. Reporting & Analysis
• The difference percentage can be retrieved programmatically.
• Can be integrated with reporting tools like ExtentReports for better visualization.

Key Features of AShot

1. Full-page & element-based screenshots – AShot captures entire web pages or specific elements, including scrollable content, ensuring comprehensive UI verification.
2. Image comparison with pixel-by-pixel diff detection – It performs an exact pixel comparison between baseline and new images, highlighting any UI changes.
3. Ignore specific areas – AShot allows defining exclusion zones to skip dynamic elements like timestamps, ads, or animations, reducing false positives.
4. Supports different screenshot strategies – Offers multiple capture modes, including viewport, full-page scrolling, cropping, and scaling, to match diverse testing needs.
5. Compatible with TestNG & JUnit for seamless automation – Easily integrates with Java-based test frameworks, making it ideal for automated UI validation in Selenium projects.
6. Lightweight & fast – Optimized for speed, AShot is efficient in CI/CD pipelines, ensuring quick feedback loops without adding significant test execution time.

Setting Up and Using AShot in Test Frameworks

Prerequisites (Java, Selenium, AShot Library)
Before integrating AShot, ensure that you have the following installed:

• Java Development Kit (JDK) – Preferably JDK 8 or later.
• Selenium WebDriver – Ensure Selenium 4+ is configured in your project.
• Maven or Gradle – Dependency management tool for adding libraries.
• TestNG or JUnit – AShot works seamlessly with both frameworks.2

Installing and Configuring AShot in a Selenium Project
To use AShot in your project, follow these steps:

Add AShot Dependency:
If you’re using Maven, add the following AShot dependency in your pom.xml file:

For Gradle, add this in your build.gradle file:

READ THE FULL BLOG:https://tinyurl.com/52yxz2n5