Skip to main content

Browser configuration

Eyes-Storybook will take a screenshot of the page as specified in the browser configuration parameter.

Possible values are:

  • chrome
  • firefox
  • edgechromium
  • edgelegacy
  • ie10
  • ie11
  • safari
  • chrome-one-version-back
  • chrome-two-versions-back
  • firefox-one-version-back
  • firefox-two-versions-back
  • safari-one-version-back
  • safari-two-versions-back
  • edgechromium-one-version-back
  • edgechromium-two-versions-back

Previous browser versions​

*-one-version-back and *-two-versions-back are relative to the version of the same browser. For example, if chrome refers to version 112, then chrome-one-version-back will be Chrome 111 and chrome-two-versions-back will be Chrome 110.

Getting a screenshot of multiple browsers in parallel​

You can send an array of browsers.

Example​

applitools.config.js
module.exports = {
  browser: [
    {width: 800, height: 600, name: 'firefox'},
    {width: 1024, height: 768, name: 'chrome'},
    {width: 1024, height: 768, name: 'ie11'}
  ]
}

Device emulation​

To enable Chrome's device emulation, you can send a device name and screen orientation.

Example​

applitools.config.js
module.exports = {
  browser: {
    deviceName: 'iPhone X',
    screenOrientation: 'landscape',
    name: 'chrome' // optional, just to make it explicit this is browser emulation and not a real device. Only chrome is supported for device emulation.
  }
}

Possible values for screen orientation are landscape and portrait. If no value is specified, the default is portrait.

The list of device names is available here.

In addition, you can use Chrome's device emulation with custom viewport sizes, pixel density, and mobile mode, by passing deviceScaleFactor and mobile in addition to width and height.

Example​

applitools.config.js
module.exports = {
  browser: {
    width: 800,
    height: 600,
    deviceScaleFactor: 3,
    mobile: true,
    name: 'chrome' // optional, just to make it explicit this is browser emulation and not a real device. Only chrome is supported for device emulation.
  }
}

iOS device​

Example​

applitools.config.js
module.exports = {
  browser: {
    iosDeviceInfo: {
      deviceName: 'iPhone XR',
      screenOrientation: 'landscape', // optional, default: 'portrait'
      iosVersion: 'latest' // optional, default: undefined (i.e. the default is determined by the Ultrafast grid)
    },
  }
}

The list of devices is available here.

Possible values for iosVersion are:

  • 'latest' - the latest iOS version that's supported by the UFG
  • 'latest-1' - one version prior to the latest version
  • undefined - the UFG's default

Faking IE Browser​

Some pages render differently on Internet Explorer and as such, it may be important to take the DOM snapshot while running on a fake IE browser using the Ultrafast Grid.

Use the fakeIE flag to render the stories in Chrome masquerading as IE.

We do this by simulating the userAgent and documentMode of the page, making the page believe it is being rendered on IE.

There is a small performance impact when using fake IE tests as the browser needs to fake IE for each story it renders.