【Playwright】独自実装なしでクライアント証明書に対応する

概要

こんにちは、booostのバックエンドエンジニアのma_meです。
社内ポータルなど、mTLS（クライアント証明書）で保護されたサイトをE2Eテストするケースがあると思います。
Playwright v1.43以降は公式の clientCertificates API が追加され、クライアント証明書の取り回しが簡単になりましたので、その使い方を紹介します。

公式ドキュメント：https://playwright.dev/docs/api/class-testoptions#test-options-client-certificates

clientCertificates APIの概要

Playwright v1.43からclientCertificatesが利用でき、独自実装なしでmTLSを通過できます。
指定する主なプロパティは次のとおりです（その他のオプションは公式ドキュメントを参照）。

• origin：アクセス先のオリジン（例：https://example.com、ポートがある場合はhttps://example.com:8443）
• certPath：クライアント証明書の形式がPEMの場合はこのkeyに指定する
• pfxPath ：クライアント証明書の形式PFXかPKCS12の場合はこのkeyに指定する
• keyPath：秘密鍵（PEM）

スクリプトでの利用（browser.newContext）

スクリプトで直接コンテキストを作る場合は以下のとおりです。

// script.ts
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
    clientCertificates: [
      {
        origin: process.env.BASE_URL!,       // 例: <https://example.com>
        certPath: process.env.CLIENT_CERT!,  // 例: ./certs/client.crt.pem
        keyPath: process.env.CLIENT_KEY!,    // 例: ./certs/client.key.pem
      },
    ],
  });
  const page = await context.newPage();
  await page.goto(process.env.BASE_URL!);
  // ... テスト操作 ...
  await browser.close();
})();

まとめ

clientCertificatesの登場で、mTLS対応は設定を書くだけで完結するようになっています。
クライアント証明書を理由にPlaywrightを避けていた場合は、今一度検討してみるのはどうでしょうか。