如何添加自定义 header 以访问页面 URL 然后在该页面上执行测试自动化，我使用的是 webdriverio、mocha、nodejs 框架

Question

我有一个网页，当通过 chrome 扩展程序设置自定义 header "headerKey": "headervalue" 时，功能会发生变化。虽然我可以手动执行此操作，但我想通过代码来执行此操作以进行测试自动化。

注：-

请帮助解决方法。

webdriver 中没有执行此操作的功能。我已经使用了 modheader 但它不起作用。

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

Answer 1

我找到了在打开我的网页时传递自定义 header 的解决方案。我正在使用 webdriverio v5 支持的 ChromeDevTools 服务，使用它的方法

browser.cdp(domain, command, parameters);

有关域、命令和参数，请访问下面的 devtools 协议：-

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

Answer 2

我知道自从添加问题以来已经过去了一段时间，尽管我花了一些时间自己弄清楚，所以也许有人会利用它。

将 @wdio/devtools-service 添加到您的开发依赖项（这应该与您的其他 @wdio 库具有相同的主要版本，否则您可能会遇到一些问题）
您需要将 devtools 添加到 wdio.conf.ts 中的服务：

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

现在添加你可以在你的测试方法或任何你需要的地方添加headers:

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

更多关于将 devtools 与 wdio 结合使用的信息： https://webdriver.io/docs/devtools-service/

有关 chrome 特定功能的更多信息： https://chromedevtools.github.io/devtools-protocol/tot/Network/

如何添加自定义 header 以访问页面 URL 然后在该页面上执行测试自动化，我使用的是 webdriverio、mocha、nodejs 框架

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

javascript

webdriver-io

browser-automation