Testing Against Multiple Viewports In Nightwatch JS

Nightwatch.js is a powerful testing framework that can be used to automate browser testing, and it can also be used to test both mobile and desktop web applications. In this article, we will explore how to use Nightwatch to test against a mobile and desktop web application.

Before we begin, it's important to note that you will need to have Nightwatch installed on your system. You can do this by running the following command:

npm install nightwatch

To test against a mobile web application with Nightwatch, you can use the .setViewportSize() command. This command allows you to set the viewport size of the browser, which can be used to simulate a mobile device. Here's an example of how you might use the .setViewportSize() command to test a mobile web application:

module.exports = {
  'Test mobile web application': function (browser) {
    browser
      .url('http://example.com')
      .setViewportSize({width: 320, height: 480})
      .assert.elementPresent('.mobile-menu')
      .end();
  }
};

This test will navigate to the website's home page, set the viewport size to 320x480 pixels, which simulates a mobile device, and assert that the mobile menu element is present on the page.

To test against a desktop web application, you can use the .resizeWindow() command. This command allows you to set the size of the browser window, which can be used to simulate a desktop device. Here's an example of how you might use the .resizeWindow() command to test a desktop web application:

module.exports = {
  'Test desktop web application': function (browser) {
    browser
      .url('http://example.com')
      .resizeWindow(1920, 1080)
      .assert.elementPresent('.desktop-menu')
      .end();
  }
};

This test will navigate to the website's home page, set the size of the browser window to 1920x1080 pixels, which simulates a desktop device, and assert that the desktop menu element is present on the page.

You can also use the .setDevice() command to set a predefined device that Nightwatch supports. Here's an example of how you might use the .setDevice() command to test a mobile web application:

module.exports = {
  'Test mobile web application': function (browser) {
    browser
      .url('http://example.com')
      .setDevice('iPhone X')
      .assert.elementPresent('.mobile-menu')
      .end();
  }
};

This test will navigate to the website's home page, set the device to iPhone X and assert that the mobile menu element is present on the page.

As you can see Nightwatch.js makes it quite easy to test both mobile and desktop web applications.