2026/04/04

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

PlaywrightE2EOTPテスト自動化

はじめに

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

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

セットアップ

npm install -D @mailbrew/playwright

Playwright設定ファイルにプラグインを追加:

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

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

OTP認証テストの実装

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

test('OTP認証でログインできる', async ({ page, mailbox }) => {
  // 1. テスト用メールアドレスを取得（自動生成）
  const addr = mailbox.address;

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

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

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

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

たったこれだけです。mailbox.captureOtp()が内部で以下を行います:

  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は最も簡単な選択肢です。無料プランで今すぐ始められます。

← ブログ一覧
© 2026 MailBrew