基于Mailtrap虚拟SMTP服务器的Cypress邮件测试配置求助

既然cypress-mailtrap已废弃，直接调用Mailtrap官方API是更稳定可靠的方案，以下是具体实现步骤：

1. 准备Mailtrap凭证 #

从Mailtrap控制台获取你的API令牌和收件箱ID，这两个是调用API的核心凭证。

2. 配置Cypress环境变量 #

在cypress.config.js中添加环境变量，避免硬编码敏感信息：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    // 其他项目配置...
  },
  env: {
    MAILTRAP_API_TOKEN: '你的API令牌',
    MAILTRAP_INBOX_ID: '你的收件箱ID'
  }
})

3. 封装Cypress自定义命令 #

在cypress/support/commands.js中封装操作Mailtrap的命令，方便测试用例复用：

获取最新邮件 #

Cypress.Commands.add('getLastMail', () => {
  return cy.request({
    method: 'GET',
    url: `https://mailtrap.io/api/v1/inboxes/${Cypress.env('MAILTRAP_INBOX_ID')}/messages`,
    headers: {
      Authorization: `Bearer ${Cypress.env('MAILTRAP_API_TOKEN')}`
    },
    qs: { limit: 1, sort: 'desc' } // 按时间倒序取最新1封邮件
  }).then(res => {
    expect(res.status).to.eq(200)
    return res.body[0]
  })
})

清空收件箱（避免旧邮件干扰） #

Cypress.Commands.add('clearInbox', () => {
  return cy.request({
    method: 'DELETE',
    url: `https://mailtrap.io/api/v1/inboxes/${Cypress.env('MAILTRAP_INBOX_ID')}/messages`,
    headers: {
      Authorization: `Bearer ${Cypress.env('MAILTRAP_API_TOKEN')}`
    }
  })
})

4. 编写测试用例 #

验证邮件核心内容 #

describe('邮件功能测试', () => {
  beforeEach(() => {
    cy.clearInbox() // 测试前清空收件箱，保证隔离性
    cy.visit('/register') // 进入触发邮件的业务页面
  })

  it('注册成功后发送的确认邮件内容正确', () => {
    // 执行触发邮件的操作
    cy.get('#email-input').type('test-user@example.com')
    cy.get('#submit-btn').click()
    cy.contains('注册请求已提交').should('be.visible')

    // 获取并验证邮件
    cy.getLastMail().then(email => {
      // 验证邮件主题
      expect(email.subject).to.equal('请完成邮箱验证')
      // 验证收件人
      expect(email.to_email).to.equal('test-user@example.com')
      // 验证正文关键内容
      expect(email.html_body).to.include('点击下方链接完成验证')
      expect(email.html_body).to.include('test-user@example.com')
    })
  })
})

验证邮件渲染外观 #

如果需要检查邮件的页面渲染效果，可以利用Mailtrap返回的预览链接，在Cypress中打开并验证元素样式：

it('确认邮件渲染样式符合预期', () => {
  // 触发邮件发送（省略重复步骤）
  cy.getLastMail().then(email => {
    cy.visit(email.html_preview_url)
    // 验证标题样式与内容
    cy.get('h1').should('contain', '欢迎加入').and('have.css', 'color', '#2d3748')
    // 验证按钮样式
    cy.get('.verify-btn').should('have.css', 'background-color', '#3182ce').and('contain', '立即验证')
  })
})

注意事项 #

• 处理邮件延迟：如果邮件发送存在延迟，可以在getLastMail命令中添加重试逻辑，或者使用cy.wait(2000)（按需调整时长）等待邮件到达
• API权限确保：确认你的Mailtrap API令牌拥有对应收件箱的读写权限
• 测试隔离：每次测试前调用clearInbox，避免不同测试用例的邮件互相干扰

内容的提问来源于stack exchange，提问作者Jacob