Playwright 이메일 테스트: 엔드투엔드 튜토리얼

이 튜토리얼은 Playwright에서 실제 이메일 흐름을 모킹 없이 엔드투엔드로 테스트하는 방법을 보여 줍니다. 테스트마다 일회용 받은편지함을 마련하고, 가입을 진행한 뒤, API를 통해 인증 메일을 읽고 코드를 추출합니다. 일회용 이메일 API 위에 쌓아 올린 내용이며, 개발자를 위한 이메일 테스트 가이드의 일부입니다.

접근 방식

받은편지함은 스위트가 아니라 테스트마다 하나씩 만드세요(공유하면 오래된 상태 문제가 다시 끼어듭니다). 브라우저에서 흐름을 발동시키고, 받은편지함 API를 폴링해 메시지를 받고, 간단한 매칭으로 코드를 뽑아 페이지에 다시 입력하면 됩니다.

재사용 가능한 fixture

받은편지함 호출을 Playwright fixture로 감싸 두면 테스트마다 자동으로 새 주소가 주어지고, 테스트 본문은 전송이 아니라 동작에 집중하게 됩니다.

// inbox.ts — talks to your MoeMail-style API
export async function createInbox() {
  const res = await fetch(API + '/emails/generate', {
    method: 'POST',
    headers: { 'X-API-Key': process.env.MAIL_KEY },
  })
  return res.json() // { id, address }
}

export async function waitForMessage(id, timeoutMs) {
  const deadline = Date.now() + (timeoutMs || 30000)
  while (Date.now() < deadline) {
    const res = await fetch(API + '/emails/' + id + '/messages', {
      headers: { 'X-API-Key': process.env.MAIL_KEY },
    })
    const list = await res.json()
    if (list.messages && list.messages.length) return list.messages[0]
    await new Promise(r => setTimeout(r, 1500))
  }
  throw new Error('no email arrived in time')
}

테스트

import { test, expect } from '@playwright/test'
import { createInbox, waitForMessage } from './inbox'

test('verifies signup email', async ({ page }) => {
  const inbox = await createInbox()
  await page.goto('/signup')
  await page.getByLabel('Email').fill(inbox.address)
  await page.getByRole('button', { name: 'Sign up' }).click()

  const msg = await waitForMessage(inbox.id, 30000)
  const code = msg.text.match(/[0-9]{6}/)[0]

  await page.getByLabel('Verification code').fill(code)
  await expect(page.getByText('Welcome')).toBeVisible()
})

Date.now()가 폴링 루프를 지키고, 매칭이 여섯 자리 코드를 잡아냅니다. 코드 대신 링크라면 URL을 매칭한 뒤 그 위에서 page.goto()를 호출하세요.

덜 불안정하게 만들기

지연을 줄이려면 폴링보다 webhook을 선호하고, 실행마다 고유한 주소를 주어 병렬 테스트가 절대 충돌하지 않게 하며, CI 타임아웃은 빠듯하게 유지하세요. 같은 레시피로 OTP와 2FA 로그인도 다룰 수 있고, 같은 fixture가 Cypress와 Selenium에서도 그대로 동작합니다.

시작하기

프로필에서 API 키를 받고, OpenAPI 문서를 읽은 뒤, 위 fixture를 스위트에 넣어 보세요. 개념이 처음이라면 개발자를 위한 이메일 테스트부터 시작하세요.