Skip to main content

Configuring browsers for the Ultrafast Grid (UFG)

When it comes to multiple browsers and mobile devices, the Ultrafast grid shines. You can run one functional test, and in the background have multiple screenshots rendered for different browsers, viewport sizes, and mobile devices.

The API methods are:

  • configuration.addBrowser(browser) to add a single browser configuration.
  • configuration.addBrowsers(browser1, browser2, ...) to add single or multiple browser configurations.

Here are examples for how to execute visual tests on different browsers and platforms:

Desktop browsers​

const {BrowserType} = require('@applitools/eyes-playwright')
// ...
const configuration = eyes.getConfiguration()
configuration.addBrowsers(
  {name: BrowserType.EDGE_CHROMIUM, width: 768, height: 1024},
  {name: BrowserType.EDGE_LEGACY, width: 768, height: 1024},
  {name: BrowserType.FIREFOX, width: 768, height: 1024},
  {name: BrowserType.CHROME, width: 768, height: 1024},
  {name: BrowserType.IE_11, width: 768, height: 1024},
  {name: BrowserType.IE_10, width: 768, height: 1024},
  {name: BrowserType.SAFARI, width: 768, height: 1024},
  {name: BrowserType.CHROME_ONE_VERSION_BACK, width: 768, height: 1024},
  {name: BrowserType.CHROME_TWO_VERSIONS_BACK, width: 768, height: 1024},
  // ...
)
eyes.setConfiguration(configuration)

Chrome device emulation​

Predefined device:

const {ScreenOrientation, DeviceName} = require('@applitools/eyes-playwright')
// ...
const configuration = eyes.getConfiguration()
configuration.addBrowsers(
  {
    chromeEmulationInfo: {
      deviceName: DeviceName.iPhone_6_7_8,
    },
  },
  {
    chromeEmulationInfo: {
      deviceName: DeviceName.Galaxy_S9_Plus,
      screenOrientation: ScreenOrientation.LANDSCAPE,
    },
  },
)
eyes.setConfiguration(configuration)

Custom device:

const configuration = eyes.getConfiguration()
configuration.addBrowser({
  chromeEmulationInfo: {
    width: 800,
    height: 600,
    deviceScaleFactor: 3,
  },
})
eyes.setConfiguration(configuration)

iOS device​

const {IosDeviceName, ScreenOrientation, IosVersion} = require('@applitools/eyes-playwright')
// ...
const configuration = eyes.getConfiguration()
configuration.addBrowser({
  iosDeviceInfo: {
    deviceName: IosDeviceName.iPhone_11,
    screenOrientation: ScreenOrientation.LANDSCAPE, // optional, default: ScreenOrientation.PORTRAIT
    iosVersion: IosVersion.LATEST // optional, default: undefined (i.e. the default is determined by the Ultrafast grid)
  },
})
eyes.setConfiguration(configuration)

Possible values for iosVersion are:

  • IosVersion.LATEST - the latest iOS version that's supported by the UFG
  • IosVersion.LATEST_ONE_VERSION_BACK' - one version prior to the latest version
  • undefined - the UFG's default

For a list of supported devices, see Devices.