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#");
            }
        })
    }

---

Gymnosperm

have you read the github page, which includes reams of usage information? – Fare

@JaromandaX I tried using github.com/zzo/browsermob-node as an example with selenium but I am not able to understand the use of seleniumproxy in it – Gymnosperm

@Gymnosperm are you trying to get the page query string or some call made through the page? – Placeeda

Also, are you doing BDD tests with selenium? – Placeeda

Parameters are encoded into the url after the ?. So if you are able to capture the requests, then you can just url decode everything after the ? and you will find the parameters. – Marthamarthe

Answer 1

I was finally able to do it using the s object available on chrome console. The url with encoded query string was available as s.rb object in chrome console. I just decoded it and extracted the query string parameters.

Gymnosperm

What is the s object? I tried to console.log(s) in the chrome console and it came back as s is not defined. – Iives

please specify how to get s object since I am not able to use that in chrome console. – Nadiya

Answer 2

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.

Placeeda

Answer 3

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

Engels

How can i use chrome.devtools.network inside my javascript code? – Gymnosperm

You can't as I know (maybe I am wrong). My suggestion is to create your extension in order to do what you need to do, and then you can communicate from your js to the extension if you setup a way of communication (if you need further actions). Otherwise if your end goal is just the one you describe here, simply transform your js code to the js code of a chrome extension – Engels