網頁擴充功能測試

WebdriverIO 是自動化瀏覽器的理想工具。網頁擴充功能是瀏覽器的一部分，可以用相同的方式自動化。每當您的網頁擴充功能使用內容腳本在網站上執行 JavaScript 或提供彈出式視窗時，您可以使用 WebdriverIO 針對其執行端對端測試。

將網頁擴充功能載入瀏覽器

第一步，我們必須將受測的擴充功能載入瀏覽器中，作為我們工作階段的一部分。這在 Chrome 和 Firefox 中的運作方式不同。

資訊

這些文件省略了 Safari 網頁擴充功能，因為他們對它的支援遠遠落後，且使用者需求不高。如果您正在為 Safari 建立網頁擴充功能，請提出問題並合作在此處加入它。

Chrome

在 Chrome 中載入網頁擴充功能可以透過提供 crx 檔案的 base64 編碼字串，或提供網頁擴充功能資料夾的路徑來完成。最簡單的方法是定義您的 Chrome 功能如下，只需執行後者

import path from 'node:path'
import url from 'node:url'

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))

export const config = {
    // ...
    capabilities: [{
        browserName,
        'goog:chromeOptions': {
            // given your wdio.conf.js is in the root directory and your compiled
            // web extension files are located in the `./dist` folder
            args: [`--load-extension=${path.join(__dirname, '..', '..', 'dist')}`]
        }
    }]
}

資訊

如果您自動化的瀏覽器不是 Chrome，例如 Brave、Edge 或 Opera，則瀏覽器選項很可能與上面的範例相符，只是使用不同的功能名稱，例如 ms:edgeOptions。

如果您使用例如 crx NPM 套件將擴充功能編譯為 .crx 檔案，您也可以透過以下方式注入綁定的擴充功能

import path from 'node:path'
import url from 'node:url'

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const extPath = path.join(__dirname, `web-extension-chrome.crx`)
const chromeExtension = (await fs.readFile(extPath)).toString('base64')

export const config = {
    // ...
    capabilities: [{
        browserName,
        'goog:chromeOptions': {
            extensions: [chromeExtension]
        }
    }]
}

Firefox

若要建立包含擴充功能的 Firefox 設定檔，您可以使用Firefox 設定檔服務來相應地設定您的工作階段。但是，您可能會遇到由於簽署問題而無法載入本機開發的擴充功能的問題。在這種情況下，您也可以透過 installAddOn 命令在 before hook 中載入擴充功能，例如

import path from 'node:path'
import url from 'node:url'

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
const extensionPath = path.resolve(__dirname, `web-extension.xpi`)

export const config = {
    // ...
    before: async (capabilities) => {
        const browserName = (capabilities as WebdriverIO.Capabilities).browserName
        if (browserName === 'firefox') {
            const extension = await fs.readFile(extensionPath)
            await browser.installAddOn(extension.toString('base64'), true)
        }
    }
}

為了產生 .xpi 檔案，建議使用 web-ext NPM 套件。您可以使用以下範例指令來綑綁您的擴充功能

npx web-ext build -s dist/ -a . -n web-extension-firefox.xpi

提示與技巧

以下章節包含一組有用的提示與技巧，這些提示與技巧在測試網頁擴充功能時可能會有所幫助。

在 Chrome 中測試彈出式視窗

如果您在您的擴充功能清單中定義 default_popup 瀏覽器動作項目，您可以直接測試該 HTML 頁面，因為點擊瀏覽器頂部欄中的擴充功能圖示不會起作用。相反地，您必須直接開啟彈出式視窗 HTML 檔案。

在 Chrome 中，這透過檢索擴充功能 ID 並透過 browser.url('...') 開啟彈出式視窗頁面來運作。該頁面上的行為將與彈出式視窗內的行為相同。為此，我們建議編寫以下自訂命令

export async function openExtensionPopup (this: WebdriverIO.Browser, extensionName: string, popupUrl = 'index.html') {
  if ((this.capabilities as WebdriverIO.Capabilities).browserName !== 'chrome') {
    throw new Error('This command only works with Chrome')
  }
  await this.url('chrome://extensions/')

  const extensions = await this.$$('extensions-item')
  const extension = await extensions.find(async (ext) => (
    await ext.$('#name').getText()) === extensionName
  )

  if (!extension) {
    const installedExtensions = await extensions.map((ext) => ext.$('#name').getText())
    throw new Error(`Couldn't find extension "${extensionName}", available installed extensions are "${installedExtensions.join('", "')}"`)
  }

  const extId = await extension.getAttribute('id')
  await this.url(`chrome-extension://${extId}/popup/${popupUrl}`)
}

declare global {
  namespace WebdriverIO {
      interface Browser {
        openExtensionPopup: typeof openExtensionPopup
      }
  }
}

在您的 wdio.conf.js 中，您可以匯入此檔案並在您的 before hook 中註冊自訂命令，例如

import { browser } from '@wdio/globals'

import { openExtensionPopup } from './support/customCommands'

export const config: WebdriverIO.Config = {
  // ...
  before: () => {
    browser.addCommand('openExtensionPopup', openExtensionPopup)
  }
}

現在，在您的測試中，您可以透過以下方式存取彈出式視窗頁面

await browser.openExtensionPopup('My Web Extension')