# Selenium Java tutorial

Applitools SDKs works with existing test frameworks and simply takes screenshots of the page, element, region or an iframe and uploads them along with DOM snapshots to our Eyes server. Our AI then compares them with previous test executions' screenshots (aka Baselines) and tells if there is a bug or not. It's that simple!

# 1.1 Baseline vs. Checkpoint images

When you first run the test, our A.I. server simply stores those first set of screenshots as Baseline images. When you run the same test again (and everytime there after), the A.I. server will compare the new set of screenshots, aka Checkpoint images, with the corresponding Baseline images and higlights differences in pink color.

# 1.2 Marking the test as "Pass" or "Fail"

When the AI compares the baseline and the checkpoint image, if it finds a legitimate difference, it'll mark the test as Unresolved. This is because the AI doesn't know if the difference is because of a new feature or a real bug and will wait for you to manually mark it as a Pass/Fail for the 1st time.

If you mark the unresolved checkpoint image as a "Fail", any further runs with similar difference will be automatically marked as "Failed".

If you mark the unresolved checkpoint image as a "Pass", then it means that the difference is due to a new feature and so we update the new checkpoint image as the new baseline and mark the current test as Pass. And going forward we'll compare any future tests with this new baseline.

# A powerful test results dashboard

We provide a state-of-the-art dashboard that makes it very easy for you to analyze differences, report bugs straight from the dashboard and so on.

The following Gifs shows various tools Applitools provide to easily analyze various differences

# Highlight differences between the baseline and checkpoint

# Zoom into diffs

# Toggle differences between baseline and checkpoint

# Show both baseline and checkpoint side-by-side

1. Create a free Applitools account and get the Applitools API KEY

2. Have Java v10 or higher installed

   • Install it from here

3. Install Eclipse or IntelliJ editor

4. Install ChromeDriver on your machine and make sure it's is in the PATH.

   Here are some resources from the internet that'll help you.

   • Install on Mac
   • Install on windows

   Tip: On Mac, place the chromedriver executable in /usr/local/bin folder so Eclipse and IntelliJ can find it.

5. Install Maven. You can download the Maven binary Zip file from here.

   • It should look something like apache-maven-3.5.4-bin.zip
   • Follow the installation instructions from here to add it to the PATH.

   TIP

   1. It's better if you add it permanently to the environment so when you open a new Terminal the values will persist. Otherwise, you may have to redo it for everytime you open the Terminal. This means you should put it in the ~/.bash_profile file (Mac) or in System variables in Windows. For more, see the Steps for adding Chromedriver to the PATH below.
   2. The Maven executable is inside /bin folder of the extracted Maven directory. So you must include /bin. It should look something like: /Users/raja/apps/apache-maven-3.5.4/bin

   # Test your Maven setup

   • Make sure to restart the Terminal or Command line prompt to load the new environment variables.
   • Run mvn -v. You should see something like below:

1. Get the code:
   • Option 1: git clone https://github.com/applitools/tutorial-selenium-java-basic.git
   • Option 2: Download it as a Zip file and unzip it.
2. Import the folder as a Maven file in Eclipse or IntelliJ.

3. Change the Applitools API key in the BasicDemo.java. Get one by logging into Applitools > Person Icon > My API Key

     // Change the APPLITOOLS_API_KEY API key with yours:
     eyes.setApiKey("APPLITOOLS_API_KEY");
   

   1
   2
   

4. Run the test

   • In Eclipse:

     • Right click on the Project (or anywhere in the code) > Run As > JUnit Test

   • In Command line, run the following Maven command:

     • mvn -Dtest=BasicDemo test

5. After you run one set of tests, you now have the baselins. Run the same test but with this URL: https://demo.applitools.com/index_v2.html. This version of the demo app has some visual bugs so you can see how it all works. And the second set of screenshots are called "Checkpoint images".

# 1. Create a Maven project and add the following dependencies to the pom.xml

<!-- Applitools SDK -->
<dependency>
    <groupId>com.applitools</groupId>
    <artifactId>eyes-selenium-java3</artifactId>
    <version>RELEASE</version>
</dependency>

# 2. Import the SDK

import com.applitools.eyes.*;
import com.applitools.eyes.selenium.ClassicRunner;
import com.applitools.eyes.selenium.Eyes;

# 3. Initialize the SDK

// Initialize the Runner for your test.
EyesRunner runner = new ClassicRunner();

// Initialize the eyes SDK
Eyes eyes = new Eyes(runner);

// Change the APPLITOOLS_API_KEY API key with yours
eyes.setApiKey("APPLITOOLS_API_KEY");

# 4. Start the test

// Set AUT's name, test name and viewport size (width X height)
// We have set it to 800 x 600 to accommodate various screens. Feel free to
// change it.
eyes.open(driver, "Demo App", "Smoke Test", new RectangleSize(800, 600));

// Navigate the browser to the "ACME" demo app.
driver.get("https://demo.applitools.com");

# 5. Add eyes.checkWindow to take a screenshot

Every checkWindow or (similar methods such as checkRegion, checkElement, checkFrame) take a screenshot and upload it to the server for analysis. And since they are part of the test, each screenshot essentially becomes a test step. Note that you can add as many check statements as you need after you open the tests.

// This line takes the screenshot
eyes.checkWindow("Login Window");

# 6. End test

// End the test.
eyes.closeAsync();

// Close the browser.
driver.quit();

// If the test was aborted before eyes.close was called, ends the test as
// aborted.
eyes.abortIfNotClosed();

# 7. Get the test results

// Wait and collect all test results
TestResultsSummary allTestResults = runner.getAllTestResults();

// Print results
System.out.println(allTestResults);

In real world testing, you'll need to test your app on multiple browsers, viewports and mobile devices. So you'll need to run and re-run ALL the tests in different browsers and multiple viewports to ensure things are fine - which could take hours and hours to complete. You may also encounter browsers not opening properly, or hanging and what not.

What if you could run in just one browser, just once, and still do cross-browser tests across various browsers, viewports and multiple mobile emulators? That's where Visual Grid [BETA] comes in.

Sounds interesting?

Go through our Visual Grid tutorial!🚀