Getting HTTP headers of the url page response directly in a Nightwatch test

[MurzNN]

Description

Pretty often we need to check not only the HTML content on the page of the response, but also HTTP headers of the response.

For example, some websites provide caching information about the page (cache hit or miss, cache tags), some additional technical information like a number of SQL queries, internal calls to 3rd-party services, etc. Or simply just get the HTTP response code (200, 304, 404, etc).

Now it is possible using the .network.captureRequests(), but it's quite hard to find the original request among others.

Another way is to use API Testing but it will require making another request, in addition to the current, if we have to check also HTML elements there, together with headers.

So, would be great to have the built-in functionality to get the headers directly from the response!

Suggested solution

Would be good to have something like this:

browser.url('https://www.google.com', {captureHeaders: true});
browser.waitForElementVisible('body', 1000);
const headers = browser.getHeaders();

Alternatives / Workarounds

If this is already possible using the current API, please share how to do this.

Additional Information

No response

[sonustar]

I will love to work on it !!

[ritankarsaha]

@MurzNN Will we be using browser.network.captureRequests() to capture requests or Use a request library like axios or fetch to make a request to the page and get headers?

[MurzNN]

Will we be using browser.network.captureRequests() to capture requests or Use a request library like axios or fetch to make a request to the page and get headers?

Using browser.network.captureRequests() is not convenient because you have to enable it in advance, and then - try to find the needed request only manually, as I understood.

So, if the Browser API doesn't provide any way to get the HTTP headers directly, seems the only way is to use fetch(). Axios is an additional dependency that is not good.

[MurzNN]

I already implemented a custom Nightwatch command that does this using fetch() for the Drupal Test Helpers module in the issue https://www.drupal.org/project/test_helpers/issues/3478014 - and it works great! So, maybe let's implement the same way in Nigthwatch directly?

I created a draft PR with my implementation of this feature #4337 - please review it and your feedback about the idea and the implementation.

[ritankarsaha]

Will we be using browser.network.captureRequests() to capture requests or Use a request library like axios or fetch to make a request to the page and get headers?

Using browser.network.captureRequests() is not convenient because you have to enable it in advance, and then - try to find the needed request only manually, as I understood.

So, if the Browser API doesn't provide any way to get the HTTP headers directly, seems the only way is to use fetch(). Axios is an additional dependency that is not good.

yeahh okaayy !