Chrome 扩展测试

概述

Chrome 扩展是为浏览器添加额外功能的好方法。 就像其他软件一样，它们也应该经过测试。 本指南重点介绍如何使用 Nightwatch 测试 Chrome 扩展。

可以在 此处 找到一个包含基本 Chrome 扩展测试的示例项目（请参见 tests/testInstalledExtension.js）。

初始化

Chrome 扩展可以使用 Nightwatch 就像测试任何其他网站一样进行测试。 因此，要开始，请使用 init 命令执行 Nightwatch 的常规设置（确保在提示时选择“Chrome”浏览器）。

cd /path/to/project/directory
npm init nightwatch

配置

在完成初始 Nightwatch 设置后，生成的 nightwatch.conf.js 文件只需要做少量更改，即可告知 Nightwatch 两件事

  • 在测试运行期间，在哪里找到要安装在浏览器中的 Chrome 扩展。
  • 自动打开 DevTools 窗口，以便可以访问已安装的 Chrome 扩展。

Chrome 扩展本身可以有两种形式，打包或解包。 打包扩展是一个带有 .crx 扩展名的单个文件，而解包扩展是一个包含扩展的目录，包括一个 manifest.json 文件。

根据要测试的扩展的格式，需要在 nightwatch.conf.js 文件中以不同的方式提供扩展的路径。

打包（.crx 文件）

如果要测试的扩展已经打包，请对您的 nightwatch.conf.js 文件进行以下更改。

进入 test_settings > chrome > desiredCapabilities > 'goog:chromeOptions' 并添加一个具有以下数组值的 extensions 密钥

nightwatch.conf.js
chrome: {
  desiredCapabilities: {
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: [
        //'--headless',
        'auto-open-devtools-for-tabs'
      ],
      // load extension from .crx file.
      extensions: [
        require('fs').readFileSync('path/to/extension.crx', {encoding: 'base64'})
      ]
    }
  },
}

另外，将 "auto-open-devtools-for-tabs" 添加到 goog:chromeOptions > args 中，以便在测试运行期间自动打开 DevTools 窗口 **（重要）**。

解包（目录）

如果要测试的扩展是解包的（包含 manifest.json 文件的目录），请对您的 nightwatch.conf.js 文件进行以下更改。

进入 test_settings > chrome > desiredCapabilities > 'goog:chromeOptions' > args 并添加 --load-extension 标志，如下所示

nightwatch.conf.js
chrome: {
  desiredCapabilities: {
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: [
        //'--headless',
        'auto-open-devtools-for-tabs',
        //
        // load extension from unpacked directory.
        '--load-extension=/path/to/extension/directory',
        //
        // if extension is present in the `src/` dir of same project.
        // `--load-extension=${__dirname}/src`,
      ],
    }
  },
}

另外，将 "auto-open-devtools-for-tabs" 添加到 goog:chromeOptions > args 中，以便在测试运行期间自动打开 DevTools 窗口 **（重要）**。

编写您的第一个测试

可以在 此处 找到用于自动化和断言 Chrome 扩展的示例测试。

当浏览器在测试运行期间首次打开时，它将在浏览器选项卡的上下文中打开。 此上下文需要更改为 DevTools 窗口，以便可以访问和测试 Chrome 扩展。

因此，在实际测试扩展之前，需要执行几个步骤。 在上面共享的示例测试中，所有这些步骤都在测试用例（it 块）中完成。 但是，由于这些步骤只需要在每个测试套件中执行一次，因此也可以将它们放在 before 钩子中，如下所示

tests/sampleTest.js
describe('test Chrome Extension inside DevTools', function() {
  before(async function() {
    // navigate to the website you want to test the extension against
    await browser.navigateTo('https://google.com');
    

    // get all targets (contexts) we can possibly switch to
    const targets = await browser.driver.sendAndGetDevToolsCommand('Target.getTargets', {});
    

    const devToolsTarget = targets.targetInfos.find(target => {
      return target.type === 'page' &&
        target.url.includes('devtools://devtools/bundled/devtools_app.html');
    });
    

    // switch to DevTools window context
    await browser.window.switchTo(devToolsTarget.targetId);
    

    // switch to last tab in pane (our extension)
    await browser.sendKeys('body', [browser.Keys.COMMAND, '[']); // for macos
    await browser.sendKeys('body', [browser.Keys.CONTROL, '[']); // for windows/linux
    

    // switch to the iframe inside the tab
    await browser.frame('iframe[src*="index.html"]');
  });
  

  it('checks the header text of the extension', async function() {
    // run automation on the extension
    await browser.element('header').getText().assert.equals('My Extension');
    

    // to visualize the extension during test run
    // await browser.pause(1000);
  });
});

类似地，可以将其他测试用例添加到测试套件（测试文件）中，其中可以测试和断言 Chrome 扩展，就像测试普通网站一样。

运行测试

要运行测试，请使用常规的 npx nightwatch 命令，如下所示

npx nightwatch tests/sampleTest.js --env chrome

[test Chrome Extension inside DevTools] Test Suite
───────────────────────────────────────────────────────────────────────────────
ℹ Connected to ChromeDriver on port 9515 (1459ms).
  Using: chrome (127.0.6533.88) on MAC.


  Running checks the header text of the extension:
───────────────────────────────────────────────────────────────────────────────
  ✔ Testing if element 'My Extension'

  ✨ PASSED. 1 assertions. (1.024s)