測試 Chrome 擴充功能

概觀

Chrome 擴充功能是為瀏覽器新增額外功能的絕佳方式。與其他軟體一樣，它們也應該經過測試。本指南著重於如何使用 Nightwatch 測試 Chrome 擴充功能。

一個包含基本 Chrome 擴充功能測試的範例專案可以在這裡找到（請參閱 tests/testInstalledExtension.js）。

初始化

可以使用 Nightwatch 像測試任何其他網站一樣測試 Chrome 擴充功能。因此，要開始使用，請使用 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 Hook 中，如下所示

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)