Introduction to the Ultrafast Grid

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:

  • Open a web page on a device to generate a baseline.
  • Ultrafast Grid uses DOM, HTML, CSS file, and other page resources to create checkpoints as they would appear on selected devices and screen sizes.
  • 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.

For a list of supported devices and browsers, see Ultrafast Grid – Supported Browsers and Devices.

For details of how to set up the code required to work with Ultrafast Grid, see Migrating code to use the Ultrafast Grid and Ultrafast Grid configuration.

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.