Selenium Java tutorial

1. πŸ€– How it works

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!

Applitools AI with RCA picture

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.

Baseline vs Checkpoint
The picture above is showing the Side-by-Side view of the baseline and checkpoint images

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".

Mark the checkpoint as a fail
The picture above is showing how to mark the checkpoint image 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.

Mark the checkpoint as a Pass
The picture above is showing how to mark the checkpoint image as Passed

Note:

  • Applitools AI has been trained with 100s of millions of images. It doesn't do a pixel-by-pixel comparison because it leads to a lot of false positives, but instead simulates real human eyes and ignore normal differences that humans would ignore and only highlight those that humans would highlight as bugs.

  • ACCURACY: A.I's current accuracy rate is 99.9999%! Which means for most applications that odds that you'll see false-positives is 1 in a million!

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.

Seeing test result summary
The picture above is showing the summary view
2. πŸ–Ό Analyzing differences

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

Highlight differences between the baseline and checkpoint

Highlight diffs

Zoom into diffs

Zoom into diffs

Toggle differences between baseline and checkpoint

Toggle differences between baseline and checkpoint

Show both baseline and checkpoint side-by-side

Show both baseline and checkpoint side-by-side
3. 🐞 Reporting bugs (straight into Jira or Github) You can simply select a section on the image and directly file a bug in Jira or Github. No need to manually take screenshots, write steps and explain things! Reporting bugs to Jira or Github
4. βœ… Prerequisites
  1. Create a free Applitools account and get the Applitools API KEY API-key

  2. Have Java v10 or higher installed

  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.

    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: Maven test result

Note:

Yoy may store the Applitools API Key in the environment variable. While this works for running the tests in the command line, if you are reading it from Eclipse or IntelliJ, then you need to launch those editors from the Terminal to read them. Otherwise, these editors won't load the environment variables!

  • Mac: export APPLITOOLS_API_KEY='YOUR_API_KEY'

  • Windows: set APPLITOOLS_API_KEY='YOUR_API_KEY'

5.1 πŸš€ - Run the existing demo app
  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.

TIP

  • Make sure to set APPLITOOLS_API_KEY (see prerequisits section).

  • Open Eclipse from Terminal so it can load the environment variables. On Mac, do something like: open /Applications/Eclipse.app ❗️

  • You may need to force download Maven dependencies

    • In Eclipse:
      • Right click on the main Project folder > Maven > Update Project
      • Select "Force Update of Snapshots/Releases" checkbox
      • Press OK
  1. 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
  2. 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
  3. 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".

5.2 πŸ€“ - Add Applitools to an existing project

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>

1
2
3
4
5
6
7

2. Import the SDK


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

1
2
3
4
5

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");

1
2
3
4
5
6
7
8
9
10

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");

1
2
3
4
5
6
7
8
9

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");
1
2

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();
1
2
3
4
5
6
7
8
9

7. Get the test results

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

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

1
2
3
4
5
6
6. πŸš€ Try Visual Grid πŸ”₯

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.

TL;DR

When you execute this tutorial, it'll run the test locally in Chrome browser but will show results in the following 5 combinations:

  1. Chrome browser (800 X 600 viewport)
  2. Chrome browser (700 X 500 viewport)
  3. Firefox browser (1200 X 800 viewport)
  4. Firefox browser (1600 X 1200 viewport)
  5. An iPhone4 emulator

... all in ~30 seconds!β°πŸš€

Sounds interesting?

Go through our Visual Grid tutorial!πŸš€




Resources




Terms & Conditions Privacy Policy GDPRΒ© 2019 Applitools. All rights reserved.

Last Updated: 8/27/2019, 2:46:05 PM