PlaywrightでOTP認証のE2Eテストを5行で書く

はじめに

OTP（ワンタイムパスワード）認証のE2Eテストは、開発者にとって長年の悩みの種でした。メールを受信し、本文からコードを抽出し、それをフォームに入力する — この一連の流れを自動化するのは、従来は非常に複雑でした。

MailBrewの@mailbrew/playwrightプラグインを使えば、この問題をわずか5行のコードで解決できます。

セットアップ

npm install -D @mailbrew/playwright

Playwright設定ファイルでAPIキーを設定:

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    mailbrew: {
      apiKey: process.env.MAILBREW_API_KEY,
    },
  },
});

OTP認証テストの実装

import { test, expect } from '@mailbrew/playwright';

test('OTP認証でログインできる', async ({ page, mailbox }) => {
  // 1. テスト用メールアドレスとOTP取得ヘルパーを作成
  const { address, waitAndExtract } = await mailbox.captureOtp();

  // 2. ログインフォームにメールアドレスを入力
  await page.goto('https://myapp.com/login');
  await page.fill('[name="email"]', address);
  await page.click('button[type="submit"]');

  // 3. OTPを自動取得（メール受信を待機 → コード抽出）
  const { code } = await waitAndExtract();

  // 4. OTPを入力してログイン完了
  await page.fill('[name="otp"]', code);
  await page.click('button[type="submit"]');

  // 5. ログイン成功を確認
  await expect(page.locator('.dashboard')).toBeVisible();
});

たったこれだけです。mailbox.captureOtp()はアドレスとwaitAndExtractを返し、waitAndExtract()が内部で以下を行います:

1. メール受信をロングポーリングで待機
2. メール本文から4〜8桁のOTPコードを自動抽出
3. コードとメールを返却

CIでの実行

GitHub Actionsでの設定例:

- name: Run E2E tests
  run: npx playwright test
  env:
    MAILBREW_API_KEY: ${{ secrets.MAILBREW_API_KEY }}

環境変数にAPIキーをセットするだけで、CI環境でも同じテストがそのまま動作します。

テストの独立性

MailBrewのPlaywrightプラグインは、テストケースごとにユニークなメールアドレスを自動生成します。並列実行しても競合が発生しません。テスト完了後はアドレスが自動クリーンアップされるため、メンテナンスも不要です。

まとめ

従来のアプローチ	MailBrew
IMAPライブラリの設定	プラグイン1行追加
メール受信のポーリング実装	captureOtp() 1行
正規表現でOTP抽出	自動抽出
テスト間のメール分離	自動アドレス生成
CI環境のSMTP設定	APIキーのみ

E2Eテストでメール認証フローをテストしたいなら、MailBrewは最も簡単な選択肢です。無料プランで今すぐ始められます。