How to Perform Visual Testing Using Selenium: A Detailed Guide

Visual testing is an essential part of UI validation, ensuring that web applications appear and function as intended across different browsers, devices, and screen resolutions. While Selenium is primarily used for functional testing, it can also be leveraged for visual regression testing with the help of additional tools and libraries.

In this blog, we’ll explore how to perform visual testing using Selenium, covering key concepts, tools, and step-by-step implementation.

Table of Contents

1. What is Visual Testing?

2. Why Use Selenium for Visual Testing?

3. Tools for Visual Testing with Selenium

4. Step-by-Step Guide to Perform Visual Testing

   • Prerequisites

   • Setting Up Selenium WebDriver

   • Capturing Screenshots

   • Comparing Screenshots

   • Generating Test Reports

5. General Steps to Perform Visual Testing

6. Best Practices for Visual Testing

7. Conclusion

1. What is Visual Testing?

Visual testing (or visual regression testing) compares screenshots of a web application’s UI against baseline images to detect unintended visual changes. It helps identify issues like:

• Layout shifts

• Broken fonts or images

• Overlapping elements

• Responsive design failures

Unlike functional testing, which verifies behavior, visual testing ensures the UI looks correct.

2. Why Use Selenium for Visual Testing?

Selenium WebDriver is widely used for automating browser interactions. While it doesn’t natively support visual comparisons, it can:

• Capture screenshots of web pages.

• Integrate with visual testing libraries (e.g., Applitools, Percy, or OpenCV).

• Run cross-browser tests to ensure consistency.

3. Tools for Visual Testing with Selenium

Here are some popular tools for visual testing with Selenium:

We’ll use AShot (for Java) and Pillow (for Python) in this guide.

4. Step-by-Step Guide to Perform Visual Testing

Prerequisites 

• Java/Python installed

• Selenium WebDriver

• Maven/Gradle (for Java) or pip (for Python)

• A testing framework (JUnit/TestNG for Java, pytest for Python)

Setting Up Selenium WebDriver

Java (Maven)

xml

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>4.10.0</version>
</dependency>
<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.5.4</version>
</dependency>

Python (pip)

bash

pip install selenium pillow opencv-python

---

Capturing Screenshots

Java (Using AShot)

java

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import javax.imageio.ImageIO;
import java.io.File;

public class VisualTest {
    public static void main(String[] args) throws Exception {
        WebDriver driver = new ChromeDriver();
        driver.get("https://example.com");
        
        // Capture screenshot
        Screenshot screenshot = new AShot().takeScreenshot(driver);
        ImageIO.write(screenshot.getImage(), "PNG", new File("screenshot.png"));
        
        driver.quit();
    }
}

Python (Using Pillow)

python

from selenium import webdriver
from PIL import Image

driver = webdriver.Chrome()
driver.get("https://example.com")

# Capture screenshot
driver.save_screenshot("screenshot.png")
driver.quit()

---

Comparing Screenshots

Java (Using AShot)

java

import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;

public class ImageComparator {
    public static boolean compareImages(String img1Path, String img2Path) throws Exception {
        BufferedImage img1 = ImageIO.read(new File(img1Path));
        BufferedImage img2 = ImageIO.read(new File(img2Path));
        
        if (img1.getWidth() != img2.getWidth() || img1.getHeight() != img2.getHeight()) {
            return false;
        }
        
        for (int y = 0; y < img1.getHeight(); y++) {
            for (int x = 0; x < img1.getWidth(); x++) {
                if (img1.getRGB(x, y) != img2.getRGB(x, y)) {
                    return false;
                }
            }
        }
        return true;
    }
}

Python (Using OpenCV)

python

import cv2
import numpy as np

def compare_images(img1_path, img2_path):
    img1 = cv2.imread(img1_path)
    img2 = cv2.imread(img2_path)
    
    if img1.shape != img2.shape:
        return False
    
    difference = cv2.subtract(img1, img2)
    return not np.any(difference)

---

Generating Test Reports 

Use testing frameworks like TestNG (Java) or pytest (Python) to log results:

@Test
public void testVisualComparison() throws Exception {
    Assert.assertTrue(ImageComparator.compareImages("expected.png", "actual.png"));
}

5. General Steps When Using a Visual Testing Platform

When using a dedicated visual testing platform (e.g., Percy, Applitools), follow these steps:

1. Set Up Your Selenium Project

Ensure you have a working Selenium automation framework in your preferred language (Java, Python, C#, JavaScript, etc.).

2. Integrate the Visual Testing SDK

Install the SDK provided by your chosen platform. Examples:

• Python (Percy)

  bash

  
  

  pip install percy-selenium

• JavaScript (Percy)

  bash

  
  

  npm install @percy/selenium-webdriver

3. Capture Baselines

The first time you run visual tests, the tool captures “baseline” screenshots (expected UI state).

Example (Python with Percy)

python

from selenium import webdriver
from percy import percy_snapshot

driver = webdriver.Chrome()
driver.get("https://your-application.com")
percy_snapshot(driver, "Homepage - Initial State")

# Perform actions
driver.get("https://your-application.com/some-other-page")
percy_snapshot(driver, "Another Page - After Interaction")
driver.quit()

4. Run Tests and Compare

In subsequent runs, the tool compares new screenshots against baselines.

5. Review and Approve Changes

• Differences are highlighted in a dashboard.

• Approve intentional changes (updates baseline).

• Flag unintended changes as bugs.

6. Integrate with CI/CD

Run visual tests in pipelines (e.g., GitHub Actions, Jenkins) for continuous feedback.

6. Best Practices for Visual Testing

7. Conclusion

Visual testing with Selenium helps ensure UI consistency across releases. While Selenium itself doesn’t support visual comparisons, integrating tools like AShot, OpenCV, or Applitools makes it possible.

By following this guide, you can implement automated visual regression testing and catch UI bugs early in development.

🚀 Next Steps: Try integrating visual testing into your CI/CD pipeline for seamless validation!

Have questions? Drop them in the comments!
#Selenium #VisualTesting #Automation #QA

Source: Read More