Overview

While loading a single webpage, your browser has to make a lot of network calls to different URLs in order to fetch different resources to be served on the page. Now, it might happen that you want to check if the browser is making a request to a particular URL, or just collect all the network calls that are being made by the browser to load a website.

You can do so by going to the Network tab of the DevTools available in your browser and looking through all the network calls that are made, but there is an easy, automated way.

With Chrome DevTools Protocol support now available in Selenium 4, Nightwatch now supports capturing all the network calls that are made while loading a website.

This command only works with Chromium based browsers such as Google Chrome and Microsoft Edge.

Capture network calls

This command allows you to capture all the network calls that are being made while loading a website, and send them back to you in your test run itelf, by calling the callback provided by you with the network call parameters as argument.

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

captureNetworkRequests() accepts a callback function, which will receive a requestParams object as an argument whenever a network call is made by the browser. All the properties available in the received requestParams can be found here. Some important properties are as follows:

Name type description
timestamp number Time at which the network call was made.
request
object The request object contains all the important details about the network call made, like URL, HTTP method used, HTTP headers, etc.
All the properties available in the request object can be read from here.

Example

tests/capture-network-calls.js
describe('capture network requests', function() {
  it('captures and logs network requests as they occur', function() {
    this.requestCount = 1;
    browser
      .captureNetworkRequests((requestParams) => {
        console.log('Request Number:', this.requestCount++);
        console.log('Request URL:', requestParams.request.url);
        console.log('Request method:', requestParams.request.method);
        console.log('Request headers:', requestParams.request.headers);
      })
      .navigateTo('https://www.google.com');
  });
});

Output from one of the network calls in the example above:

  Running Capture network calls:
───────────────────────────────────────────────────────────────────────────────────────────────────
Request Number: 35
Request URL: https://www.google.com/favicon.ico
Request method: GET
Request headers: {
  'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="102", "Google Chrome";v="102"',
  'sec-ch-ua-full-version-list': '" Not A;Brand";v="99.0.0.0", "Chromium";v="102.0.5005.61", "Google Chrome";v="102.0.5005.61"',
  'sec-ch-ua-mobile': '?0',
  'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36',
  'sec-ch-ua-arch': '"x86"',
  'sec-ch-viewport-width': '1200',
  'sec-ch-ua-full-version': '"102.0.5005.61"',
  'sec-ch-ua-platform-version': '"12.1.0"',
  Referer: 'https://www.google.com/',
  'sec-ch-dpr': '2',
  'sec-ch-ua-bitness': '"64"',
  'sec-ch-ua-wow64': '?0',
  'sec-ch-ua-model': '',
  'sec-ch-ua-platform': '"macOS"'
}