🎯 Playwrightで本物のメール認証付きサインアップフローを自動テストする

はじめに

多くのWebアプリでは、ユーザー登録の際にメール確認が必須です。

ですが、自動テストでは以下の理由でスキップされがちです：

• 実際のメール確認は手間がかかる
• 外部サービスの連携が難しい
• テスト実行が遅くなる

その結果、多くのプロジェクトではモックや確認リンクの省略など、現実とは異なるテストになってしまいます。

そこで今回は、PlaywrightとTigrmailを使って、本物のメール認証を含むエンドツーエンドの登録テストを簡単に実現する方法をご紹介します。

👉 完全なサンプルリポジトリはこちら：
https://github.com/furionix-labs/playwright-email-verification-example

🧪 テストの流れ

今回のテストでは、次のような登録フローを検証します：

1. 一時的なメールアドレスを生成（Tigrmail API使用）
2. そのメールアドレスでサインアップ
3. 実際の確認メールの到着を待機
4. メール本文から確認リンクを抽出
5. 確認リンクを開いてアカウントを有効化

⚙️ 環境構築

まずはリポジトリをクローンします：

git clone https://github.com/furionix-labs/playwright-email-verification-example.git
cd playwright-email-verification-example

依存パッケージをインストール：

npm install

.envファイルを作成：

cp .env.example .env

TigrmailのコンソールからAPIトークンを取得して、.envに設定します。

▶️ テストの実行

下準備ができたら、テストを実行します：

npx playwright test

ブラウザが起動し、以下の操作を自動で行います：

• フォーム入力
• メール受信待機
• 確認リンクの抽出とアクセス
• 登録状態の確認

📄 テストコードの解説（signup.spec.ts）

import { test, expect } from '@playwright/test';
import { Tigrmail } from 'tigrmail';
import * as dotenv from 'dotenv';
import * as cheerio from 'cheerio';

// メールHTMLから最初の<a>リンクを抽出する関数
function extractFirstLink(html: string): string | null {
  const $ = cheerio.load(html);
  return $('a').first().attr('href') ?? null;
}

// 環境変数を読み込み
dotenv.config();
const TIGRMAIL_TOKEN = process.env.TIGRMAIL_TOKEN;

test('user can sign up and verify email', async ({ page }) => {
  if (!TIGRMAIL_TOKEN) {
    throw new Error('Set TIGRMAIL_TOKEN in .env');
  }

  // 一時的なメールアドレスを生成
  const tigr = new Tigrmail({ token: TIGRMAIL_TOKEN });
  const emailAddress = await tigr.createEmailAddress();

  // サインアップページへ移動
  await page.goto('/sign-up');

  // 入力フォームを埋める
  await page.getByTestId('email-input').fill(emailAddress);
  await page.getByTestId('password-input').fill('TestPassword123!');
  await page.getByTestId('password-confirm-input').fill('TestPassword123!');

  // フォームを送信
  await page.getByTestId('submit-btn').click();

  // 確認メール送信の案内を確認
  await expect(page.getByTestId('verification-status')).toHaveText(
    'Your email is not verified. Please check your inbox for the verification email.'
  );

  // 確認メールが届くまで待機
  const message = await tigr.pollNextMessage({ inbox: emailAddress });

  // 確認リンクを抽出
  const verificationLink = extractFirstLink(message.body);
  if (!verificationLink) {
    throw new Error('No <a> tag with href found in the email body');
  }

  // 確認リンクを開く
  await page.goto(verificationLink);

  // 確認成功の表示を待機
  await page.waitForSelector('text=Your email has been verified');

  // 元の画面に戻って状態を確認
  await page.goBack();
  await expect(page.getByTestId('verification-status')).toHaveText('Your email is verified!');
});

💡 Tigrmailとは？

Tigrmailは、メール確認や通知系のE2Eテスト専用のサービスです。以下の特徴があります：

• 超高速な使い捨てインボックス
• 件名・送信者・ドメインによるフィルタリング
• 自動ポーリング（待機＋リトライ）対応
• 月間3,000通まで無料（9月1日まで）
• Node.js用の公式SDKあり

以下のようなユースケースにも適しています：

• パスワードリセット
• マジックリンク
• 2FAコード確認
• オンボーディングメール
• マーケティング通知のA/Bテスト

✅ まとめ

メール認証はアプリの重要な一部であり、テストでも無視すべきではありません。

PlaywrightとTigrmailを組み合わせれば、現実に近い形で完全なE2Eテストが実現できます。

今なら無料で試せるので、ぜひ一度ご自身のプロジェクトに組み込んでみてください。

👉 GitHubリポジトリはこちら：
https://github.com/furionix-labs/playwright-email-verification-example