在默认 NightWatch 浏览器实例中启用和修改 Chome 扩展（特别是 ModHeader 扩展）答案

【问题标题】：Enabling and modifying Chome Extensions in default NightWatch browser instance (specifically ModHeader extension)在默认 NightWatch 浏览器实例中启用和修改 Chome 扩展（特别是 ModHeader 扩展）
【发布时间】：2017-03-07 03:52:56
【问题描述】：

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

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

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

我能够启用扩展并使用存储在 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;
}

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

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

我头疼得厉害...任何帮助将不胜感激，谢谢！

【问题讨论】：

您好，谢谢您的回答！你确定它有效吗？我记得我可以使用 modHeader 集开始页面..但不幸的是，我打开了两个选项卡，一个设置了标题，另一个是执行我的测试...如果你只有一个选项卡并且执行了测试在带有标题集的页面内 - 很好！！！

标签： javascript selenium google-chrome-extension nightwatch.js mod-headers

【解决方案1】：

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

首先，在您的 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: [],
     }]))`);
    },
  }],
};

【讨论】：

嘿，伙计，我认为你救了我的命。我以此为基础在量角器上调整了相同的想法，并且像魅力一样工作。
@Farmijo 您能否分享您的量角器示例。我一直在努力将其添加到我的量角器框架中
如何加载多个扩展？

【解决方案2】：

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

找到我的扩展程序所在的位置： Where to find extensions installed folder for Google Chrome on Mac?
转到我的扩展的已安装版本： chrome://extensions/?id=idgpnmonknjnojddfkpgkljpfnnfcklj
点击左上角的 Pack Extension（可能会根据 chrome 的版本移动）
在显示“扩展根目录”的地方，我输入了在步骤 1 中找到的位置，然后单击了“打包扩展”
将步骤 1 中在目录中创建的 crx 文件移到我的仓库中 /extensions/modheader.crx 下（此处重命名为 crx）
在 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],
    }
  }

添加了一个类似于所选答案的 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');
    },
  }],
};

在安装文件中我添加了：

module.exports ={
  beforeEach: async (browser, done) => {
    const modHeaderPage = browser.page.modHeaderPage();
    modHeaderPage.setHeader();
    // more code
    done();
  }

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

Down side is headless 不适用于扩展...

Is it possible to run Google Chrome in headless mode with extensions?

【讨论】：