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

Question

我正在使用 NightWatch.js 并进行一些 UI 测试，我想使用一些额外的 desiredCapabilities（即扩展已启用并应用了一些特定值）。

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

为了完全清楚，手动执行操作如下所示： Link 至分机： 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 内）。当我执行代码时，第二个浏览器 window 打开并在其中执行操作。同时，主（或默认）浏览器实例没有扩展名。 如何在主浏览器实例中修改扩展程序？

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

我一直头痛不已...任何帮助将不胜感激，谢谢！

Answer 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: [],
     }]))`);
    },
  }],
};

Answer 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();
  }

我现在可以使用扩展程序将 headers 添加到我的请求中。希望这会帮助其他人，花了太长时间才能让它工作：D

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

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

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

Enabling and modifying Chome Extensions in default NightWatch browser instance (specifically ModHeader extension)

javascript

selenium

google-chrome-extension

mod-headers

nightwatch.js