Cypress 이메일 테스트: E2E 테스트에서 이메일 검증하기

Cypress는 브라우저를 다루는 데 뛰어나지만, 인증 메일은 그 바깥에 있습니다. 이 가이드는 일회용 받은편지함을 마련하고 API로 읽어 들이는 커스텀 명령으로 Cypress 이메일 테스트를 더합니다. 개발자를 위한 이메일 테스트 가이드의 일부이며, Playwright·Selenium 버전과 짝을 이룹니다.

접근 방식

테스트마다 받은편지함 하나를 만들고, 흐름을 진행한 뒤, 메시지가 도착할 때까지 받은편지함 API를 폴링하세요. 이를 커스텀 명령으로 감싸면 스펙이 깔끔하게 읽힙니다.

커스텀 명령

// cypress/support/commands.js
Cypress.Commands.add('createInbox', () => {
  return cy.request({
    method: 'POST',
    url: API + '/emails/generate',
    headers: { 'X-API-Key': Cypress.env('MAIL_KEY') },
  }).its('body')
})

Cypress.Commands.add('waitForEmail', (id, tries = 20) => {
  const poll = (n) => cy.request({
    url: API + '/emails/' + id + '/messages',
    headers: { 'X-API-Key': Cypress.env('MAIL_KEY') },
  }).then((res) => {
    if (res.body.messages.length) return res.body.messages[0]
    if (n === 0) throw new Error('no email arrived')
    cy.wait(1500)
    return poll(n - 1)
  })
  return poll(tries)
})

테스트

it('verifies the signup email', () => {
  cy.createInbox().then((inbox) => {
    cy.visit('/signup')
    cy.get('#email').type(inbox.address)
    cy.contains('Sign up').click()
    cy.waitForEmail(inbox.id).then((msg) => {
      const code = msg.text.match(/[0-9]{6}/)[0]
      cy.get('#code').type(code)
    })
    cy.contains('Welcome').should('be.visible')
  })
})

재귀적 poll은 고정 타이머에 의존하는 임의의 cy.wait 없이도 Cypress의 명령 큐를 매끄럽게 유지합니다. 같은 명령으로 비밀번호 재설정 메일도 테스트할 수 있습니다 — 코드 대신 링크를 매칭하기만 하면 됩니다.

팁

테스트마다 고유한 주소를 주고, 가능하면 webhook을 선호하며, CI 타임아웃은 빠듯하게 유지하세요. 메일박스를 만들고 OpenAPI 문서를 읽어 연결해 보세요.