1

我正在使用 NightWatch.js 并进行一些 UI 测试，我想使用一些额外的 desiredCapabilities 启动默认浏览器实例（即启用扩展并应用一些特定值）。

注意：我可以执行这些操作，但不能在默认浏览器实例中执行。

要完全清楚，手动执行操作如下所示： 链接到扩展：https ://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfckljModHeader-扩展

我能够启用扩展并使用存储在 pageObject 文件中的此命令更新值：

setChromeOptions(url) {
  const chromeCapabilities = webdriver.Capabilities.chrome();

  // setting chrome options
  const chromeOptions = {
    args:

    // path to local ModHeader extension
    ['--load-extension=/Users/raja.bellebon/AppData/Local/Google/Chrome/User Data/Default/Extensions/idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0/'],
  };

  chromeCapabilities.set('chromeOptions', chromeOptions);
  const driver = new webdriver.Builder().withCapabilities(chromeCapabilities).build();
  driver.get('chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/_generated_background_page.html');

  // setup ModHeader extension with the header value
  driver.executeScript(`
    localStorage.setItem('profiles', JSON.stringify([{ /* eslint-env browser*/
      title: 'Selenium',
      hideComment: true,
      appendMode: '',
      headers: [
      { enabled: true, name: 'X-Static-Homepage', value: 'true' },
      ],
      respHeaders: [],
      filters: [],
    }]))`);
  driver.get(url);
  return this;
}

该函数在测试开始时被调用（作为第一步或在 a 中before）。当我执行代码时，会打开第二个浏览器窗口并在其中执行操作。同时，主（或默认）浏览器实例没有扩展名。如何修改主浏览器实例中的扩展？

在阅读了一些博客后，我发现我可能需要修改 conf.js 并在那里应用我的代码，但我无法获取/修改当前驱动程序。

我被一个巨大的头痛困住了......任何帮助将不胜感激，谢谢！

4

2 回答 2

4

这么晚才回复很抱歉。我只是想出了如何做到这一点，所以想分享如果你将来需要它。

首先，在您的 nightwatch.json 文件中，设置所需的功能，如下所示：

"desiredCapabilities": {
    "javascriptEnabled": true,
    "acceptSslCerts": true,
    "browserName": "chrome",
    "chromeOptions": {
      "args": ["--load-extension=/home/pratik/.config/google-chrome/Default/Extensions/idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0"]
    }
  }

然后在你的测试中，

before: (client) => {
  modHeaderPage = client.page.modHeaderPage();
  modHeaderPage.setHeader();
  homePage = client.page.homePage();
}

您的页面对象如下所示：

module.exports = { 
  elements: {},
  commands: [{
    setHeader() {

      // set the context on the extension so the localStorage can be accessed
      const url = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/2.1.2_0/settings.tmpl.html'; // modHeader extension
      this.navigate(url).waitForElementPresent('body', 20000);

      // setup ModHeader with header
      this.api.execute(`
        localStorage.setItem('profiles', JSON.stringify([{ /* eslint-env browser*/
          title: 'Selenium',
          hideComment: true,
          appendMode: '',
          headers: [
            { enabled: true, name: 'Header_Name', value: 'Header_Value' },
          ],
          respHeaders: [],
          filters: [],
     }]))`);
    },
  }],
};
于 2017-09-26T05:34:09.983 回答
0

所选答案似乎不适用于最新版本的 Mod Headers。现在有一个 selenium 版本的modheaders，我尝试使用它，但它仍然无法正常工作，所以我所做的是：

  1. 找到我的扩展程序所在的位置： 在哪里可以找到 Mac 上 Google Chrome 的扩展程序安装文件夹？
  2. 转到我的扩展程序的安装版本： chrome://extensions/?id=idgpnmonknjnojddfkpgkljpfnnfcklj
  3. 单击左上角的 Pack Extension（可能会根据 chrome 的版本移动）
  4. 在显示“扩展根目录”的地方，我输入了在步骤 1 中找到的位置并单击“打包扩展”
  5. 从步骤 1 中获取在目录中创建的crx文件，将其移动到我的 repo 下/extensions/modheader.crx（在此处重命名为 crx）
  6. 在 nightwatch.conf.js 中添加：
const fs = require('fs');
const stream = fs.readFileSync(`${__dirname}/extensions/modheader.crx`);
const modHeader = Buffer.from(stream).toString('base64');
...
  desiredCapabilities: {
    javascriptEnabled: true,
    acceptSslCerts: true,
    browserName: "chrome",
    chromeOptions: {
      extensions:[modHeader],
    }
  }
  1. 添加了一个 modHeaderPage ，如所选答案：
module.exports = {
  elements: {
  },
  commands: [{
    setHeader() {
      const url = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj/popup.html'; // modHeader extension
      this.navigate('https://www.google.com'); // needs to hit a non extension page before the extension, don't matter what it is
      this.navigate(url).waitForElementPresent('body', 20000);
      // Uses Nightwatch Apis to add header information
      this.api.setValue('input[placeholder="Name"]', 'HEADER_NAME');
      this.api.setValue('input[placeholder="Value"]', 'HEADER_VALUE');
    },
  }],
};
  1. 在设置文件中我添加了：
module.exports ={
  beforeEach: async (browser, done) => {
    const modHeaderPage = browser.page.modHeaderPage();
    modHeaderPage.setHeader();
    // more code
    done();
  }

现在我可以使用扩展为我的请求添加标头。希望这对其他人有所帮助，花了太长时间才能使它起作用：D

缺点是无头不适用于扩展...

是否可以在带有扩展的无头模式下运行 Google Chrome？

于 2021-04-07T21:12:11.110 回答