How to add custom header for accessing a page URL and then performing test automation on that page, i am using a webdriverio,mocha,nodejs framework

Question

I have a web page where the functionality changes when a custom header "headerKey": "headervalue" is being set through a chrome extension. While I can do this manually I want to do it through the code in order to do test automation.

Note:-

Please help with the approaches.

There is no functionality in webdriver to perform this operation. I have used modheader but it is not working.

getModHeaderExtension() {
    const filename = path.join(__dirname, "Modify.crx");
    console.log(filename);
    const stream = fs.readFileSync(filename);
    return new Buffer(stream).toString('base64');
}

Answer 1

I was able to find the solution to pass a custom header while opening my webpage. I am using ChromeDevTools service which is supported by webdriverio v5, using its method

browser.cdp(domain, command, parameters);

For the domain, command, and parameters please visit devtools protocol below:-

https://chromedevtools.github.io/devtools-protocol/