/applitools-cbt-20211216

Applitools Workshop: Modern Cross-Browser Testing (December 16, 2021)

Primary LanguageJavaMIT LicenseMIT

Modern Cross-Browser Testing Workshop

Applitools Workshop: Modern Cross-Browser Testing

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

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

Abstract

As organizations double down on digital, the concept of quality has evolved from "does it work" to "is it the best experience" — but the race to deliver innovation to market faster than the competition is causing challenges for software teams.

More frequent releases multiplied by an explosion of device/browser combinations and increased application complexity has exponentially increased the number of screens that need to be validated each cycle – an industry average of 81,480 screens to 681,296 for the top 33% – and traditional test automation can’t keep up.

In this 1-hour interactive workshop you will learn how industry leaders are integrating cross-browser testing into CI/CD for faster and immediate feedback.

Highlights:

  • The importance and evolution of cross browser testing
  • Critical requirements for a scalable cross browser testing initiative and pros/cons of different approaches
  • How to accelerate cross browser / cross device testing for integration into CI/CD

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.