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 know some time passed since the question was added, although it took me some time to figure it out by myself so maybe someone will make use of it.

1. Add @wdio/devtools-service to your dev dependencies (this should have the same major version as your other @wdio libraries, otherwise you can get some problems)
2. You need to add devtools to services in wdio.conf.ts:

export const config = {
  [...]
  services: ['chromedriver', 'devtools']
  [...]
}

3. Now add you can add headers in you test method or wherever you need to:

const encodedCredentials = base64.encode(`${appConfig.basicAuthDevUser.userName}:${appConfig.basicAuthDevUser.password}`);
browser.cdp('Network', 'setExtraHTTPHeaders', {
  headers: {
    Authorization: `Basic ${encodedCredentials}`,
  },
});

More on using devtools with wdio: https://webdriver.io/docs/devtools-service/

More on chrome specific capabilites: https://chromedevtools.github.io/devtools-protocol/tot/Network/