こんにちは、@ueokandeです。 Playwrightは Selenium や Puppeteer と並び注目されているエンドツーエンドテスト自動化の 1 つです。 Playwright は、Chromium、Firefox、Webkit を公式サポートしています。

Playwright は開発途中の Chrome 拡張のインストール方法は公式ドキュメントで紹介されていますが、Firefox アドオンはサポートしていません。 しかし Firefox アドオンも、自動でアドオンをインストールする仕組みを用意しています。 この度、Chrome 拡張/Firefox アドオンをインストールできる、playwright-webextext という Playwright 拡張ライブラリを作りました。

• https://github.com/ueokande/playwright-webextext

インストール方法

npmパッケージを配布しているので、npm installまたはyarn addで利用できます。

# npm
npm install --save playwright-webextext

# yarn
yarn add playwright-webextext

使い方

withExtension()

このメソッドは Playwright のコア API を拡張します。 ローカルファイルシステムから、Chrome 拡張/Firefox アドオンをロードする BrowserType を返します。

import { firefox } from "playwright"
import { withExtension } from "playwright-webextext"
;(async () => {
  const browserTypeWithExtension = withExtension(
    firefox, // ベースとなるブラウザ
    "path/to/your/extensions" // manifest.jsonを含むディレクトリのパス
  )
  const browser = await browserTypeWithExtension.launch()

  const page = await browser.newPage()
  await page.goto("https://example.com/")
})()

Chromium で Chrome 拡張をロードするときは、永続化コンテキスト（launchPersistentContext()）かつ非ヘッドレスで起動する必要があります。

const browser = await browserTypeWithExtension.launchPersistentContext("", {
  headless: false,
})

createFixture()

このメソッドは@playwright/test パッケージの提供するテストメソッドを拡張します。 ローカルファイルシステムから、Chrome 拡張/Firefox アドオンをロードしたブラウザでテストが実行されます。

import { createFixture } from "playwright-webextext"

const { test, expect } = createFixture("path/to/your/extensions")

test("should launch browser with extensions", async ({ page }) => {
  await page.goto("https://example.com/")

  // ...
})

仕組み

Chromium

Chromium はコマンドラインオプションから Chrome 拡張をロードできます。 詳しい情報については以下をご覧ください。

• Chrome Extensions | Playwright

Firefox

Firefox はRemote Debugging Protocolというプロトコルを使った、リモートからブラウザを制御できるサーバーを提供します。 このプロトコルはアドオンのインストールも可能です。 playwright-webextext はこのプロトコルを使ってアドオンをインストールします。