# Quickstart for Visual Testing with Playwright in Java

This quickstart will show you how to visually test web apps in Java using Playwright. Visual testing can help you catch problems that traditional automation struggles to find.

After preparing your environment, this **three-step quickstart** should take **about 15 minutes** to complete.

## Step 1: Preparing your environment

You'll need a few things to run this quickstart:

1. An [Applitools account](https://auth.applitools.com/users/register), which you can register for free.

2. The [Java Development Kit (JDK)](https://www.oracle.com/java/technologies/downloads/), version 8 or higher. To install it, follow the [JDK Installation Guide](https://docs.oracle.com/en/java/javase/19/install/overview-jdk-installation.html).

3. A good Java editor, such as:
   - [JetBrains IntelliJ IDEA](https://www.jetbrains.com/idea/)
   - [Eclipse IDE](https://www.eclipse.org/)
   - [Apache NetBeans](https://netbeans.apache.org/)
   - [Visual Studio Code](https://code.visualstudio.com/docs/languages/java)

4. [Apache Maven](https://maven.apache.org/download.cgi) for project builds and dependencies.

### Installing Maven

If you use JetBrains IntelliJ IDEA, Eclipse IDE, or Apache NetBeans, then you do not need to install Maven separately because these IDEs come bundled with Maven.

Otherwise, you will need to install Maven and add it to the system `PATH` variable. Follow instructions on the [Installing Apache Maven](https://maven.apache.org/install.html) page. On macOS and Linux, you can install Maven with [Homebrew](https://brew.sh/) by running `brew install maven`.

If you installed Maven separately from an IDE, then you can test that Maven is working by running the `mvn -v` command to print its version.

## Step 2: Getting your example project

### Downloading the example project

The example project is located at [https://github.com/applitools/example-playwright-java](https://github.com/applitools/example-playwright-java). Clone this repository to your local machine:

```text
git clone https://github.com/applitools/example-playwright-java.git
cd example-playwright-java
```

Don't have Git?

Instead of running `git clone`, you can [download the project as a ZIP file](https://github.com/applitools/example-playwright-java/archive/refs/heads/master.zip) and extract it.

### Installing the dependencies

The example project uses [Apache Maven](https://maven.apache.org/index.html) for package management. All dependencies are listed in the project's `pom.xml` file. If you are using a Java IDE, then the IDE should install the dependencies and build the project for you. However, you may also install dependencies from the command line using the following command:

```text
mvn install
```

### Deciding how to run tests

There are two ways to test the visual snapshots captured by the test:

1. Using _Applitools [Ultrafast Grid](/content/docs/eyes/concepts/test-execution/ultrafast-grid/index.html)_ for cross-browser testing in the cloud
2. Using _Applitools Classic runner_ on your local machine

### Walking through the code

The project contains one visual test case, which is located at `src/test/java/com/applitools/example/AcmeBankTests.java`.

```java
package com.applitools.example;

import com.applitools.eyes.BatchInfo;
import com.applitools.eyes.EyesRunner;
import com.applitools.eyes.RectangleSize;
import com.applitools.eyes.TestResultsSummary;
import com.applitools.eyes.config.Configuration;
import com.applitools.eyes.playwright.ClassicRunner;
import com.applitools.eyes.playwright.Eyes;
import com.applitools.eyes.playwright.fluent.Target;
import com.applitools.eyes.visualgrid.BrowserType;
import com.applitools.eyes.visualgrid.model.DeviceName;
import com.applitools.eyes.visualgrid.model.ScreenOrientation;
import com.applitools.eyes.visualgrid.services.RunnerOptions;
import com.applitools.eyes.playwright.visualgrid.VisualGridRunner;
import com.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserContext;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import org.junit.jupiter.api.*;

public class AcmeBankTests {
    ...
}
```

## Step 3: Running your tests

### Setting Applitools variables

Before running the visual test, you must [find your Applitools API key](/content/docs/eyes/getting-started/retrieve-api-key/index.html) and set it as an environment variable named `APPLITOOLS_API_KEY`.

### Launching visual tests

The easiest way to launch this test is through a Java IDE. Just make sure to set the `APPLITOOLS_API_KEY` environment variable in your test's run configuration.

You can also launch this test from the command line using the following Maven command:

```text
mvn test
```

When you run tests with the Applitools Ultrafast Grid, the Test Manager will show a separate result for each rendering. When you run tests with the Applitools Classic runner, the Test Manager will show the one snapshot from your local machine.

You can also change the web page to inject visual bugs:

```java
page.navigate("https://demo.applitools.com/index_v2.html");
```

## Taking the next steps with Applitools

Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.

### Resources for next steps:

1. [Setting match levels for visual checkpoints](/content/docs/eyes/concepts/best-practices/match-levels/index.html)
2. [Organizing Tests Into Batches](/content/docs/eyes/concepts/best-practices/batching/index.html)
3. [Run A/B Tests](/content/docs/eyes/concepts/best-practices/baseline-variations/index.html)

Documentation Search