Modern Cross-Browser Testing with Selenium in Java

This repository contains the example code for the Modern Cross-Browser Testing workshop led by Pandy Knight and hosted by Applitools.

Full instructions for the workshop are provided in WORKSHOP.md.

Abstract

Testing web apps in 2022 is still a hard problem. Apps are more complex than ever, and their pages must be validated against an exploding number of combinations of browsers, devices, and versions – an industry average of 81,480 screens to 681,296 for the top 33%.

Old-school tools like Selenium WebDriver still get the job done today, but old-school techniques for making assertions and running tests across different browsers can't keep up. Why? They are inherently sloooooooooow: Slow to develop, slow to execute, and slow to maintain. It's time to rethink how we automate web UI tests at scale for true Continuous Testing.

In this 1-hour workshop, Pandy Knight, the Automation Panda, will explain how to create ultrafast automated cross-browser tests using Applitools Eyes with Selenium WebDriver in Java, and how to integrate them into CI/CD to provide feedback on quality across all browser/device combinations in seconds.

Highlights:

• The importance and evolution of cross browser testing
• Critical requirements for a scalable cross browser testing initiative and pros/cons of different approaches
• Implementing a modern cross browser solution using Applitools Eyes with Selenium WebDriver in Java
• Accelerating test automation with integration into CI/CD to achieve Continuous Testing

Outline

1. Traditional cross-browser testing
   1. Writing a typical login test
   2. Running the test locally
   3. Updating the test to handle multiple browsers
   4. Scaling out cross-browser testing yourself
   5. Scaling out cross-browser testing as a service
2. Modern cross-browser testing
   1. Reconsidering what should be tested
   2. Introducing Applitools Ultrafast Grid
   3. Rewriting login as a visual test
   4. Running visual tests across multiple browsers
   5. Integrating modern cross-browser testing with CI/CD

Prerequisites

To complete this workshop, you will need:

1. An Applitools account (register here for free)
2. Java Development Kit (JDK) 17
3. A Java IDE like IntelliJ IDEA
4. Google Chrome
   • The up-to-date version of the browser
   • The matching version of ChromeDriver installed on system path
5. Mozilla Firefox
   • The up-to-date version of the browser
   • The matching version of geckodriver installed on the system path

Architecture

This project is a small Java test automation project containing JUnit 5 test cases for an Applitools demo site. It uses Selenium WebDriver for browser interactions and Apache Maven for dependency management. Each test case covers the same login behavior, but they do so in different ways:

1. TraditionalTest covers login using traditional assertions on a local machine.
2. UltrafastVisualTest covers login using Visual AI with Applitools Eyes and Ultrafast Grid.

Running tests

The easiest way to run the tests is one at a time through an IDE. Alternatively, you can run the tests from the command line with Maven using the mvn test command.

TraditionalTest runs WebDriver sessions on the local machine. Each test launch can target either Google Chrome or Mozilla Firefox. Set the BROWSER environment variable to chrome or firefox to choose the browser.

UltrafastVisualTest runs one WebDriver session on the local machine with Applitools Eyes. Then, it sends snapshots of pages to Applitools Ultrafast Grid to visually test across seven unique configurations. To connect to the Applitools cloud, you must set the APPLITOOLS_API_KEY environment variable to your Applitools API key.

Both tests can cover the "original" state of the demo site as well as a visually "changed" state. Set the DEMO_SITE environment variable to original or changed to pick the target site. TraditionalTest should pass for both versions of the site. UltrafastVisualTest should detect visual differences. Run it first with DEMO_SITE=original to set a baseline, and then run it with DEMO_SITE=changed to reveal the differences.