How to capture query string parameters from network tab programmatically

Question

I am trying to capture query string parameters for analytics purpose using javascript. I did some searching and found that BMP can be used to do it but i am unable to find ample examples to implement. Could anyone point me in the right direction.

EDIT 1: I used below code using browsermob-proxy to get har file but i get ERROR: browsermob-proxy returned error when i run it . I use selenium with it.

getHarFile() {
        const proxy = browsermb.Proxy;
        const pr = new proxy({host:"0.0.0.0",port:4444});
        pr.doHAR("http://www.cnn.com/", (err,data) => {
            if (err) {
                logger.debug('ERROR: ' + err);
            } else {
                fs.writeFileSync('ua.com.har', data, 'utf8');
                logger.debug("#HAR CREATED#");
            }
        })
    }

---

Answer 1

So since I´m not quite sure of your scope I will throw you some ideas:

1. Fixing browsermob-proxy

You should change the host and proxy of the browsermob-proxy. Change the host to 127.0.0.1 and the port with any random number (4444 its ok). Then, make sure your browser run in that host and proxy by changing the browser settings.

2. Using plain javascript

2.1 Get current page query string

You can get the query string using location.search. If you are using some BDD framework with selenium, it is possible to execute javascript code and retrieve the result. You should always add a return to your code in order to recieve the response in your BDD test.

2.2 Using Performance API

You can access to all the network information within performance api. If you need to get the current page url you can use the following code:

performance.getEntriesByType("navigation")

This will return all the current navigation events and information.

If you want to get some information of the calls that the page made you can access it using:

performance.getEntriesByType("resource")

This will return all the calls made by your site. You have to loop over it searching the resource you want to find.

---

In all the ways, there is no way to get the value and key of query string as in the network tab. You have to separate it manually with a function, you can use the code provided here to get the value of a key.

Answer 2

My suggestion is to create your personal extension for Google Chrome, and developing an extension you can access few more apis that are not available by default in the console. For example you will have this object in order to inspect the network tab:

chrome.devtools.network

Here two links you may find useful:

https://developer.chrome.com/extensions/devtools

https://developer.chrome.com/extensions/devtools_network

I hope it helps