Visual Regression Testing with Selenium and Visual-Comparison

Visual testing is crucial for ensuring that a web application’s appearance remains consistent and visually correct after updates or changes. This blog will guide you through using Selenium for browser automation and a custom image comparison utility for performing visual tests.

Introduction

Visual testing helps detect unintended changes in the UI by comparing screenshots taken at different points in time. In this guide, we will use Selenium to automate web interactions and take screenshots, and then compare these screenshots using an image comparison utility known as visual-comparison.

Prerequisites

Before we start, make sure you have the following installed:

• Python 3.x
• Selenium (pip install selenium)
• Visual Comparison(pip install visual-comparison)

Setting Up the Environment

1. Install Selenium:
   pip install selenium

2. Install Visual-Comparison Package:
   pip install visual-comparison

Writing the Selenium Script

Let’s write a Selenium script that logs into a sample website, takes a screenshot, and compares it with a baseline image.

Step 1: Initialize WebDriver and Open the Webpage
First, initialize the WebDriver and navigate to the target webpage:

from selenium import webdriver
from selenium.webdriver.common.by import By

# Initialize the WebDriver
driver = webdriver.Chrome()

# Open the target webpage
driver.get("https://www.saucedemo.com/v1/")
driver.maximize_window()
driver.implicitly_wait(5)

Step 2: Perform Login
Next, log into the website by filling in the username and password fields and clicking the login button. Currently visual testing the dashboard page after login. You can modify this code based on your requirements:

# Login to the website 
username = driver.find_element(By.ID, "user-name")
username.send_keys("standard_user")

password = driver.find_element(By.ID, "password")
password.send_keys("secret_sauce")

# Click on the login button
login_button = driver.find_element(By.ID, "login-button")
login_button.click()`

**Step 3: Take a Screenshot**
After logging in, take a screenshot of the page and save it:
# Take a screenshot after login to visualize the changes
actual_image_path = "actual.png"
driver.save_screenshot(actual_image_path)

# Close the browser
driver.quit()

Step 4: Compare Images
Use your custom image comparison utility to compare the baseline image (expected.png) with the newly taken screenshot (actual.png):

from visual_comparison.utils import ImageComparisonUtil

# Load the expected image and the actual screenshot
expected_image_path = "expected.png"
expected_image = ImageComparisonUtil.read_image(expected_image_path)
actual_image = ImageComparisonUtil.read_image(actual_image_path)

# Choose the path to save the comparison result
result_destination = "result.png"

# Compare the images and save the result
similarity_index = ImageComparisonUtil.compare_images(expected_image, actual_image, result_destination)
print("Similarity Index:", similarity_index)

# Asserting both images
match_result = ImageComparisonUtil.check_match(expected_image_path, actual_image_path)
assert match_result

Complete Script

Here is the complete script combining all the steps:

"""
This python script compares the baseline image with the actual image.
After any source code modification, the visual changes are compared easily through this script.
"""
from selenium import webdriver
from selenium.webdriver.common.by import By
from visual_comparison.utils import ImageComparisonUtil

# Initialize the WebDriver
driver = webdriver.Chrome()

# Open the target webpage
driver.get("https://www.saucedemo.com/v1/")
driver.maximize_window()
driver.implicitly_wait(5)

# Login to the website 
username = driver.find_element(By.ID, "user-name")
username.send_keys("standard_user")

password = driver.find_element(By.ID, "password")
password.send_keys("secret_sauce")

# Click on the login button
login_button = driver.find_element(By.ID, "login-button")
login_button.click()

# Take a screenshot after login to visualize the changes
actual_image_path = "actual.png"
expected_image_path = "expected.png"
driver.save_screenshot(actual_image_path)

# Close the browser
driver.quit()

# Load the expected image and the actual screenshot
expected_image = ImageComparisonUtil.read_image(expected_image_path)
actual_image = ImageComparisonUtil.read_image(actual_image_path)

# Choose the path to save the comparison result
result_destination = "result.png"

# Compare the images and save the result
similarity_index = ImageComparisonUtil.compare_images(expected_image, actual_image, result_destination)
print("Similarity Index:", similarity_index)

# Asserting both images
match_result = ImageComparisonUtil.check_match(expected_image_path, actual_image_path)
assert match_result

Output
Similarity Index: 1.0 (i.e.No Visual Changes)

Note: Create a baseline image/expected image before executing the above script. Refer to this repository GitHub Link

Conclusion

This guide demonstrates how to perform visual testing using Selenium for web automation and visual-comparison package to compare screenshots. By automating visual tests, you can ensure that UI changes do not introduce any visual flaws, thus maintaining a consistent user experience.