The power of Chrome Devtools Protocol — Part II
Network domain
In the previous article, we covered the powerful features of the Tracing domain using CDP and how to implement it in a Selenium test. In this article, we will cover the Network domain and how we can capture network requests using this domain.
You can find the complete code at https://github.com/germanbisogno/cdp-utils. Let’s jump into it!
Using Network domain
Let’s show the manual example first of how to use the Network tab in Chrome. We will be recording some requests based on a Google search.
- Open devtools (F12) and go to the Network tab
- Start recording
- Enter to https://www.google.com
- Perform a search on Google
After recording some requests, we will have a result similar to the following.
From the toolbar, you can export the HAR file by selecting the following icon in the top toolbar.
The exported file will contain a lot of useful information about the request like timing, type of request, size, and much more, that can help to determine the performance of your APIs for example, or just to analyze if you have performance bottlenecks in your application.
If you need more information about how to use the Network tab, you can check here.
How do we automate?
It can be done using the Network domain, you will be able to collect information about the requests. We will be observing a set of events that will give us the necessary information about the Network. For example:
[
‘Page.loadEventFired’,
‘Page.domContentEventFired’,
‘Page.frameStartedLoading’,
‘Page.frameAttached’,
‘Network.requestWillBeSent’,
‘Network.requestServedFromCache’,
‘Network.dataReceived’,
‘Network.responseReceived’,
‘Network.resourceChangedPriority’,
‘Network.loadingFinished’,
‘Network.loadingFailed’,
];Now, let’s implement a classNetworkwritten in Typescript where we will extend again from traceOperationsas previously we have done with the Tracingclass.
Please, take into account that npm dependencies used in the previous article will be required.
Notice in this class we have implemented the usage ofPage.enableand Network.enablethat will be required to capture network events and when we stop the trace, it comes to the utility chrome-har using harFromMessages which will be used to convert network events into a readable HAR file.
Additionally, a new method has been implemented to emulate network conditions by using theNetwork.emulateNetworkConditionscommand. It is useful if you need to emulate different network conditions like 2G, 3G, 4G, GPRS, and more types of connections. Please, find below some examples:
export const NETWORK_PRESETS = {
‘GPRS’: {
‘offline’: false,
‘downloadThroughput’: 50 * 1024 / 8,
‘uploadThroughput’: 20 * 1024 / 8,
‘latency’: 500
},‘Regular2G’: {
‘offline’: false,
‘downloadThroughput’: 250 * 1024 / 8,
‘uploadThroughput’: 50 * 1024 / 8,
‘latency’: 300
},‘Good2G’: {
‘offline’: false,
‘downloadThroughput’: 450 * 1024 / 8,
‘uploadThroughput’: 150 * 1024 / 8,
‘latency’: 150
},.. more presets
To use the above presets, you will need to specify which Network conditions you may want to use in your test. In this case, it is provided by the parameter to the method emulateNetworkConditions that is represented with the following interface:
Developing a test!
Next, let’s implement the test to generate our HAR file!
Finally, after executing the test, let’s import the file from the toolbar by selecting
Let’s see how it looks!
Conclusion
We went into the Network domain and some of its different features. The Network domain allows tracking the network activities of the page. It exposes information about HTTP requests and responses, their headers, bodies, timing, and much more. Also, using this domain to simulate network conditions is great!
We will continue covering more domains in future articles.
Hope you have enjoyed this journey! See you next time!
Thanks for reading!
