Overview

The variety of devices users access the internet with are increasing rapidly and it becomes more important to ensure that your website or web application works as expected across all devices with varying screen sizes.

With Chrome DevTools Protocol support now available in Selenium 4, Nightwatch supports testing on varying screen dimensions. You can override the values of the screen dimensions in a test with just a single command. Along with that, you can also emulate a mobile device for loading your website, and change the device-scale-factor/device-pixel-ratio of your website as well.

Override device dimensions

Overriding the device dimensions while running your tests allows you to test how your website loads on different screen dimensions, without actually testing them on devices with different screen sizes. This is especially useful while testing the responsiveness of your website.

All you need to do is call the browser.setDeviceDimensions() command with the required parameters before navigating to your website.

setDeviceDimensions() accepts an object as its first argument. The specifications of the object are as follows:

Example

describe('modify device dimensions', function() {
  browser
    .setDeviceDimensions({
      width: 400,
      height: 600,
      deviceScaleFactor: 50,
      mobile: true
    })
    .navigateTo('https://www.google.com');
});

Reset device dimensions

To reset the device dimensions back to original, you can again call the browser.setDeviceDimensions() command, but without any arguments this time.

Example:

describe('modify and reset device dimensions', function() {
  browser
    .setDeviceDimensions({
      width: 400,
      height: 600,
      deviceScaleFactor: 50,
      mobile: true
    })
    .navigateTo('https://www.google.com')
    .pause(1000)
    .setDeviceDimensions()  // resets the device dimensions
    .navigateTo('https://www.google.com')
    .pause(1000);
});