Cross Browser Testing With The Applitools Ultrafast Grid

Overview

Applitools Ultrafast Grid allows you perform visual testing across multiple browsers and devices in seconds, to make sure that your content is visually perfect on every device, screen size, and browser combination.

Users access your website using many different devices, browsers, and screen sizes. This means that a page may be displayed in dozens of different ways depending on the devices and settings of the user accessing the page. Using Ultrafast Grid you can open a page once, and then almost immediately see how the page would be rendered on dozens of devices and Applitools Eyes can alert you to any visual bugs. This means that you do not need to set up an in house QA lab or use a lab provider and run a test dozens of times to test on each device, browser, and screen setting.

For example, a change to a CSS file may not have any impact when viewing a page using Chrome on a laptop, or on an iOS phone, but the text does not wrap correctly when the page is rendered on a tablet in landscape mode.

Because the navigation runs once, and not on each device, the process is significantly faster and is much more stable than running the test multiple times. Ultrafast Grid eliminates common issues such as network instability or time lag while running a test on multiple devices.

Benefits of the Ultrafast Grid

Using the Ultrafast Grid provides the following advantages:

• Out-of-the-box cross-platform testing without the need to build and maintain a QA lab with devices and browsers. Just configure the platforms, devices, and viewport you want to test.
• More robust and stable than solutions that use remote browsers and devices.
• Faster test execution and decreased testing time:
  • Offload checkpoint image creation to powerful cloud servers.
  • Parallel processing of tests, steps, and multiple cross-platform renderings.
• More secure as you do not need to give access to a lab provider.
• Minimal coding overhead. Work with your existing Eyes test. Just add platform configurations and the calls that create, pass, and call the VisualGridRunner object that manages the concurrency and the interaction with the Ultrafast Grid.

Ultrafast Grid workflow

The process works as follows:

1. Open a web page on a device to generate a baseline.
2. Ultrafast Grid uses DOM, HTML, CSS file, and other page resources to create checkpoints as they would appear on selected devices and screen sizes.
3. Applitools Eyes compares the generated checkpoints to baseline images and identifies any visual changes or anomalies that need to be investigated.

Pages are recreated on virtual devices maintained by Applitools, this means that you always have current versions of each device available without needing to maintain an in-house QA lab with multiple devices. As Ultrafast Grid uses cached images and data to recreate screen elements that have not changed, the process requires a fraction of the time and bandwidth that would be needed to run tests separately on each device.

You can see a full list of supported browsers and devices here.

Types of rendering environments

Ultrafast Grid supports the following rendering environments:

• Desktop browser: The page is rendered using a browser on a desktop environment. The desktop environment depends on the chosen browser type: Microsoft Internet Explorer and Edge run on Windows, Safari runs on macOS, and other browsers run on Linux. When requesting a desktop browser you also specify the required viewport size.

• Emulated Android mobile device: The page is rendered using Chrome device emulation running on a desktop environment. The desktop environment and browser depend on the chosen device type.

• iOS mobile device: The page is rendered using a Safari browser running on a mobile device simulator.

When specifying a mobile device the viewport size is based on the device screen size, you can specify whether to render the page in portrait or landscape orientation.

Configuring Tests With the Ultrafast Grid

Working with Baselines

By default, when running tests using the Ultrafast Grid, every browser configuration uses the baseline implied by the execution environment of that configuration, i.e. the Browser, Viewport size and Operating system:

• When adding a desktop browser (e.g. using the Configuration.addBrowser method), the Browser and Viewport size baseline attributes are defined by the parameters pf the method. The Operating system attributes will depend on the browser type - Microsoft browsers run on a Windows operating system and other browsers run on a Linux system.
• When adding an emulated mobile device (e.g. using the Configuration.addDeviceEmulation method), the Browser attributes will be "Chrome", the Viewport size will be based on the screen size of that device, and the Operating system attributes will be the name of the native operating system for that device.

If two or more browser configurations are supposed to look the same, then you can use the Eyes baseline environment feature to do cross-browser testing by specifying a common baseline for multiple browser configurations.

Setting up the baseline environment when using the Ultrafast Grid

You can use baseline environments to specify that a specific baseline environment should be used to identify the baseline, instead of the test execution environment. For example, you can assign the name "desktop-browser" to an existing baseline for the Windows/Chrome/1024x768 execution environment. Then you can specify that all the checkpoints should be matched against the "desktop-browser" irrespective of the actual execution environment. For full details on how to use this feature see the article Running cross-environment tests. This article explains how to specify the baseline environment for a browser configuration.

To specify the execution environment for browser configurations, each of the methods that define a browser configuration also supports an optional baseline environment name parameter.

Before running the test, make sure that the environment names you use are defined in the Eyes Test Manager as described in the article Assign an environment name.

tip

When doing cross browser testing, you should use a match level of LAYOUT. This level focuses on the structure of the page rather than the textual or graphic content, making it more suitable for finding significant differences between browsers. This so done in the snippet above using the method setMatchLevel. See Match levels for a detailed description of the Layout match level and how it differs from the Strict level.