Applitools Eyes: Visual AI Testing Guide for Web and Mobile Apps

Applitools Eyes is a visual testing platform that uses AI to detect UI regressions. Instead of writing pixel-level assertions, you take visual "checkpoints" during your tests, and the AI identifies changes that matter — ignoring rendering noise while catching real layout breaks.

This guide covers the core concepts, getting started, and integrating Eyes into your existing test suite.

What Is Applitools Eyes?

Traditional automated tests check functional behavior: does this button exist, does clicking it navigate to the right page, does the form submission return a 200. They don't check whether the button is invisible because its color matches the background, whether a CSS change pushed content off-screen, or whether a font loaded incorrectly.

Applitools Eyes addresses visual testing. It captures screenshots at defined checkpoints, compares them against approved baselines, and flags visual differences. The AI component filters out dynamic content (timestamps, ads, animated elements) and focuses on structural changes.

Use cases:

• Catching CSS regressions across browsers
• Verifying responsive design across viewport sizes
• Detecting unexpected UI changes after dependency updates
• Cross-browser visual consistency checks

How It Works

1. Baseline capture — first run, Eyes saves screenshots as the approved baseline
2. Checkpoint comparison — subsequent runs compare new screenshots against the baseline
3. AI analysis — Visual AI classifies differences as content-level or noise
4. Review and approval — team reviews flagged differences in the Eyes dashboard, approving intentional changes or rejecting regressions

The review step is important: Eyes doesn't automatically pass or fail tests based on any visual difference. A human decides whether a visual change is a bug or an intentional update.

Account Setup

1. Sign up at applitools.com
2. Get your API key from Account → API Key
3. Store it as APPLITOOLS_API_KEY in your environment

Integration with Selenium (Java)

Add the dependency to pom.xml:

<dependency>
  <groupId>com.applitools</groupId>
  <artifactId>eyes-selenium-java5</artifactId>
  <version>LATEST</version>
</dependency>

Basic test:

import com.applitools.eyes.selenium.Eyes;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class VisualTest {
  public static void main(String[] args) {
    WebDriver driver = new ChromeDriver();
    Eyes eyes = new Eyes();
    
    eyes.setApiKey(System.getenv("APPLITOOLS_API_KEY"));
    
    try {
      eyes.open(driver, "My App", "Homepage Test");
      
      driver.get("https://myapp.example.com");
      eyes.checkWindow("Homepage");
      
      driver.findElement(By.id("login-btn")).click();
      eyes.checkWindow("Login page");
      
      eyes.close();
    } finally {
      driver.quit();
      eyes.abortIfNotClosed();
    }
  }
}

Integration with Playwright (JavaScript)

Install:

npm install @applitools/eyes-playwright

Test:

const { chromium } = require('playwright');
const { Eyes, Target, Configuration, BatchInfo } = require('@applitools/eyes-playwright');

describe('Visual tests', () => {
  let browser, page, eyes;

  beforeAll(async () => {
    browser = await chromium.launch();
    eyes = new Eyes();
    
    const config = new Configuration();
    config.setApiKey(process.env.APPLITOOLS_API_KEY);
    config.setBatch(new BatchInfo('My App Tests'));
    eyes.setConfiguration(config);
  });

  it('Homepage looks correct', async () => {
    page = await browser.newPage();
    await eyes.open(page, 'My App', 'Homepage', { width: 1280, height: 720 });
    
    await page.goto('https://myapp.example.com');
    await eyes.check('Homepage', Target.window().fully());
    
    await eyes.close();
  });

  afterAll(async () => {
    await browser.close();
    await eyes.abortIfNotClosed();
  });
});

Checkpoint Types

Full window screenshot:

await eyes.check('Full page', Target.window().fully());

Specific element:

await eyes.check('Navigation', Target.region(page.locator('nav')));

Floating regions (ignore elements that move):

await eyes.check('Page', Target.window().floating(page.locator('.ad-banner'), 20, 20, 20, 20));

Ignore regions (exclude dynamic content entirely):

await eyes.check('Page', Target.window().ignore(page.locator('.timestamp')));

Baselines and Branching

Eyes ties baselines to a combination of:

• App name
• Test name
• Browser/OS/viewport configuration

When you update your UI intentionally, approve the new screenshots in the Eyes dashboard. They become the new baseline for future comparisons.

For branching workflows, Eyes supports baseline branching: each feature branch gets its own baseline, and merging a branch merges its baselines — similar to how code branches work.

The Eyes Dashboard

After a test run, review results at eyes.applitools.com:

• Passed — no visual differences from baseline (or baseline being set for the first time)
• Unresolved — differences detected, awaiting human review
• Failed — differences rejected by a reviewer (confirmed regressions)

From the dashboard you can:

• Compare screenshots with an interactive diff overlay
• Annotate differences for teammates
• Approve or reject in bulk
• Set baseline images per region

When Visual Testing Makes Sense

Visual testing adds value when:

• Your app has complex, visually-important UIs (dashboards, data visualizations, forms)
• You make frequent CSS or layout changes
• You're testing across many browsers and need cross-browser visual consistency
• You're releasing mobile apps where pixel-perfect matters

It's less valuable for purely functional APIs, simple admin UIs, or teams without a UI review culture.

Related Tools

• Applitools Ultrafast Grid — parallel cross-browser visual testing
• Applitools vs Percy — comparison of visual testing platforms
• Applitools Selenium integration — detailed Java/Python/JS examples

For functional API testing alongside visual checks, HelpMeTest runs end-to-end tests continuously with plain-English test definitions — no SDK integration required.