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
| Approach | Tool | Best For |
|---|---|---|
| Pixel-perfect | Ashot | Static pages, no dynamic content |
| AI-powered | Applitools | Pages with dates, user names, ads |
| Perceptual hash | Custom | Quick thumbnail comparison |
| Manual review | Screenshot diff tool | One-time regression check |
