Buscando um código de confirmação enviado por e-mail com o Mailosaur

Aprenda como facilmente capturar um e-mail de confirmação utilizando o plugin cypress-mailosaur

No curso de testes end-to-end com Cypress da Escola TAT no Udemy, ensino como testar uma funcionalidade de Sign up, na qual o/a usuário(a) deve passar por duas telas. Na primeira tela, digita-se o e-mail, a senha e a confirmação da senha. Então, quando tal formulário é submetido, um código de confirmação é enviado para o e-mail digitado anteriormente e tal código deve ser digitado na segunda tela para que o registro seja completo. 📧

Atingimos isso com o uso do serviço Mailosaur e do plugin cypress-mailosaur. No entanto, durante o curso, demonstro uma solução que usa uma expressão regular para buscar o código de confirmação a partir do body do email, conforme demonstrado abaixo.

cy.mailosaurGetMessage(Cypress.env('MAILOSAUR_SERVER_ID'), {
  sentTo: emailAddress
}).then(message => {
  const confirmationCode = message.html.body.match(/\d{6}/)[0]
  cy.get('#confirmationCode').type(`${confirmationCode}{enter}`)
})

Neste blog post, vou te apresentar uma solução mais simples. Vem comigo!

Fazendo um console.log(message), temos a seguinte estrutura.

{
  id: "server-id-heree",
  server: "server-here",
  from: [{
    name: "",
    email: "email@example.com",
    phone: null
  }],
  to: [{
    name: "",
    email: "email@server.mailosaur.net",
    phone: null
  }],
  cc: [],
  bcc: [],
  received: "2023-07-03T11:08:17.494972Z",
  subject: "Your verification code",
  html: {
    links: [],
    images: [],
    codes: [{ value: "123456" }],
    body: "Your verification code is 123456. "
  },
  text: {...},
  attachments: [],
  metadata: {...},
  type: "Email"
}

Perceba que dentro da propriedade html, há uma array de codes (códigos) e seu primeiro valor é um objeto com a propriedade value (valor) igual a 123456.

Ou seja, em vez de buscar o código de confirmação (através da propriedade body do html da message) com o uso de uma expressão regular, podemos buscar o código diretamente, conforme demonstrado abaixo.

cy.mailosaurGetMessage(Cypress.env('MAILOSAUR_SERVER_ID'), {
  sentTo: email
}).then(({ html }) => {
  cy.get('#confirmationCode').type(`${html.codes[0].value}{enter}`)
})

No código acima, depois da chamada do comando cy.mailosaurGetMessage, quando encadeamos o comando .then, passamos à ele uma função de callback, na qual desestruturamos o html da mensagem, visto que é nele que está a propriedade que nos interessa (o código de confirmação). E na hora de digitar o código, ou seja, quando chamamos o comando .type, passamos ao mesmo o código diretamente (html.codes[0].value).

Obs.: Visto que a propriedade codes é um array e o valor do código de confirmação está no objeto do primeiro item do array, buscamos o codes com índice zero (0) e então a propriedade value.

Desta forma, nenhuma expressão regular é necessária e (na minha opinião) o código fica um pouco mais simples.

E assim, conseguimos facilmente capturar um código de confirmação com o plugin cypress-mailosaur, sem a necessidade da complexidade extra adicionada por uma expressão regular. 🥳

É isso aí! Espero que tenha gostado do conteúdo e tenha aprendido algo novo.

Os detalhes para instalação e configuração do plugin cypress-mailosaur podem ser encontrados no repositório do curso. Aproveita pra deixar uma estrela! ⭐

Quer aprender mais sobre automação de testes web com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

👋  Até a próxima e bons testes!