</>

Technology

Scenario-Based

Difficulty

Advanced

Interview Question

How do you perform visual or image comparison testing in Selenium?

Answer

Visual / Image Comparison Testing in Selenium

Functional assertions check data and behavior. Visual testing checks that the UI looks correct — catching layout shifts, font changes, color regressions, and overlapping elements.

Method 1 — Ashot Library (Open Source, Pixel-Level)

XML
<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.5.4</version>
</dependency>

Take and Save Baseline Screenshot:

Java
Screenshot baselineShot = new AShot()
    .shootingStrategy(ShootingStrategies.viewportPasting(100)) // full page
    .takeScreenshot(driver);

ImageIO.write(baselineShot.getImage(), "PNG",
    new File("src/test/resources/baseline/homepage.png"));

Compare with Baseline:

Java
// Take current screenshot
Screenshot currentShot = new AShot()
    .shootingStrategy(ShootingStrategies.viewportPasting(100))
    .takeScreenshot(driver);

// Load baseline
BufferedImage baseline = ImageIO.read(
    new File("src/test/resources/baseline/homepage.png"));

// Compare
ImageDiffer differ = new ImageDiffer();
ImageDiff diff = differ.makeDiff(
    new Screenshot(baseline), currentShot);

if (diff.hasDiff()) {
    // Save diff image showing changed pixels
    ImageIO.write(diff.getMarkedImage(), "PNG",
        new File("test-output/diff/homepage-diff.png"));
    Assert.fail("Visual difference detected! See: test-output/diff/homepage-diff.png");
}

Method 2 — Element-Level Visual Check

Java
// Compare just the product card, not full page
WebElement productCard = driver.findElement(By.cssSelector(".product-card:first-child"));

Screenshot elementShot = new AShot()
    .takeScreenshot(driver, productCard);

BufferedImage baseline = ImageIO.read(new File("baseline/product-card.png"));
ImageDiff diff = new ImageDiffer().makeDiff(new Screenshot(baseline), elementShot);

Assert.assertFalse(diff.hasDiff(), "Product card UI has changed");

Method 3 — Applitools Eyes (AI-Based, Cloud)

XML
<dependency>
    <groupId>com.applitools</groupId>
    <artifactId>eyes-selenium-java5</artifactId>
    <version>LATEST</version>
</dependency>
Java
EyesRunner runner = new ClassicRunner();
Eyes eyes = new Eyes(runner);
eyes.setApiKey("YOUR_APPLITOOLS_API_KEY");

eyes.open(driver, "AutomateQA", "Homepage Test");
driver.get("https://automateqa.online");

eyes.checkWindow("Full Homepage"); // AI compares to baseline
eyes.checkElement(By.cssSelector(".hero-section"), "Hero Section");

TestResultsSummary results = runner.getAllTestResults();
// Applitools dashboard shows visual diffs with AI filtering of
// dynamic content (ads, timestamps) to reduce false positives

Method 4 — Custom Pixel Comparison

Java
public boolean imagesAreEqual(BufferedImage img1, BufferedImage img2, int tolerance) {
    if (img1.getWidth() != img2.getWidth() || img1.getHeight() != img2.getHeight()) {
        return false;
    }
    int diffPixels = 0;
    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)) diffPixels++;
        }
    }
    double diffPercent = (double) diffPixels / (img1.getWidth() * img1.getHeight()) * 100;
    return diffPercent < tolerance; // e.g., < 1% different = pass
}

Visual Testing Strategy

ApproachToolBest For
Pixel-perfectAshotStatic pages, no dynamic content
AI-poweredApplitoolsPages with dates, user names, ads
Perceptual hashCustomQuick thumbnail comparison
Manual reviewScreenshot diff toolOne-time regression check

Follow AutomateQA

Related Topics