Device emulation

[!NOTE]
Available since e2e.support version 5.3.0

Test suite uses Playwright device emulation and devices repository to emulate particular device. The device determines browser screen/viewport size, user agents, touch and so on.

This allows us to run test suites against Desktop vs Mobile screen sizes and browser/mobile set of UI (touch for example). It also provides consistency as the viewPort and screenSize is always set.

Specifying Device

By default the device parameter is specified under worldParameters in the cucumber.mjs and defaults to Desktop Chrome:

...
  worldParameters: {
    device: process.env.PW_DEVICE ?? 'Desktop Chrome',
    ...
  }
...

It is possible to override the device parameter on the command line using environment variable PW_DEVICE which value should be set to the device name from the Playwright device repository.

PW_DEVICE="iPhone" npm run test
PW_DEVICE="Desktop Safari" npm run test

[!NOTE]
In case you type non-existing device or make a typo the test run will fail with appropriate message and a list of available devices.

Available device emulation options

Playwright device emulation has rich set of settings, as you can see. Some of the settings are applied when the device is set, like viewPort, browser…

Other configuration options can be set using contextOptions parameter under worldParameters in the cucumber.mjs:

...
  worldParameters: {
    device: process.env.PW_DEVICE ?? 'Desktop Chrome',
    contextOptions: {
      reducedMotion: 'reduce',
      locale:'en-GB',
      timezone_id:'Europe/London',
    }
    ...
  }
...

Debugging & verification

The test suites are printing the configuration which is used to run the test suite after being processed and evaluated. This is useful to verify correct settings:

[pavel|~/Work/Fry-IT/e2e.support/test] (main *$) PW_DEVICE="Desktop Safari" npm run test

> test
> NODE_OPTIONS="--loader ts-node/esm --no-warnings" cucumber-js

Test suite configuration:
{
  "device": "Desktop Safari",
  "browserOptions": {
    "headless": true,
    "slowMo": 0,
    "devtools": false,
    "args": [
      "--use-fake-ui-for-media-stream",
      "--use-fake-device-for-media-stream",
      "--enable-usermedia-screen-capturing"
    ],
    "firefoxUserPrefs": {
      "media.navigator.streams.fake": true,
      "media.navigator.permission.disabled": true
    },
    "browserType": "webkit"
  },
  "contextOptions": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15",
    "viewport": {
      "width": 1280,
      "height": 720
    },
    "screen": {
      "width": 1792,
      "height": 1120
    },
    "deviceScaleFactor": 2,
    "isMobile": false,
    "hasTouch": false,
    "defaultBrowserType": "webkit",
    "reducedMotion": "reduce",
    "locale": "en-GB",
    "timezone_id": "Europe/London"
  },
  "consoleLevels": [],
  "enableDebugging": false,
  "enableTracing": false,
  "enableVideoRecording": false,
  "profile": "default",
  "product": "apply",
  "regenerateReferenceScreenshots": false,
  "urls": {
    "baseURL": "https://booking.badger.dev.kaizenep.com",
    "bookingURL": "https://booking.badger.dev.kaizenep.com",
    "kaizenURL": "https://badger.dev.kaizenep.com",
    "practiqueURL": "https://browserstack.test.practique.net/",
    "managementURL": "https://badger.dev.kaizenep.com"
  }
}