Adieu les tests d'email bancals : Automatisez tout avec Cypress & Playwright (et gardez vos cheveux)

Vous connaissez ce moment de solitude ?

Celui où votre test E2E plante pour la 4ème fois consécutive parce que votre serveur SMTP de mock a décidé de faire la sieste. Ou pire, ce moment où vous devez expliquer à votre PO que non, le bug en production n'a pas été vu parce que "sur l'environnement de test, on simule l'envoi d'email, on ne le fait pas vraiment".

Soyons honnêtes : tester les emails dans un flux utilisateur (inscription, mot de passe oublié, OTP), c'est souvent la bête noire des développeurs. C'est lent, c'est fragile ("flaky", comme disent nos amis d'outre-Atlantique), et franchement, c'est pénible.

Mais si je vous disais qu'il existe un monde où vos tests d'email sont aussi rapides et fiables que vos tests unitaires ? Un monde où vous pouvez générer une vraie adresse, recevoir un vrai mail, et cliquer sur un vrai lien, le tout en quelques millisecondes ?

Bienvenue dans le futur. Bienvenue chez JunkMail.

Pourquoi vos tests actuels vous détestent

Généralement, on a deux écoles :

L'école "Je mock tout" : Vous interceptez la requête API et vous dites à votre front "T'inquiète, le mail est parti". Sauf que le jour où SendGrid change sa config ou que votre template HTML est cassé, vous ne voyez rien.
L'école "Mailtrap / Mailhog" : C'est mieux. Mais c'est souvent lent, limité en volume, et ça ne teste pas la délivrabilité réelle (SPF, DKIM, DMARC... ces acronymes barbares qui font qu'un mail arrive ou non).

Il nous faut une troisième voie : une infrastructure réelle, éphémère, et pilotable par API.

L'Arme Secrète : L'API JunkMail Business

Imaginez pouvoir invoquer une boîte mail fraîchement créée d'un claquement de doigts (ou plutôt, d'un appel POST), l'utiliser, et la laisser disparaître dans les limbes numériques une fois votre test fini. Propre. Efficace.

C'est exactement ce que nous allons faire.

Étape 1 : Invoquer les esprits (Créer une adresse)

Avant de lancer Cypress ou Playwright, il nous faut une cible. Pas test@test.com (le pauvre reçoit déjà assez de spam comme ça), mais une adresse unique pour cette exécution de test.

// Petit script de setup (ou dans votre beforeEach)
const response = await fetch('https://api.junkmail.site/v1/addresses', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer VOTRE_CLE_BUSINESS_QUI_BRILLE', 
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ alias: 'e2e-inscription-test' })
});

const { data } = await response.json();
const monAdresseMagique = data.address; // ex: xkcd42@junkmail.site

Boom. Vous avez une adresse. Elle est vivante. Elle respire.

Cypress : L'art d'attendre sans s'impatienter

Cypress est génial, mais il n'aime pas trop sortir du navigateur. Pour vérifier nos emails, nous allons devoir utiliser cy.request et un peu de magie récursive.

Créons une commande personnalisée, parce qu'on est des gens civilisés :

// cypress/support/commands.js
Cypress.Commands.add('attendreMonPrecieuxEmail', (addressId) => {
  const verifier = () => {
    return cy.request({
      method: 'GET',
      url: `https://api.junkmail.site/v1/emails?address_id=${addressId}`,
      headers: { 'Authorization': `Bearer ${Cypress.env('JUNKMAIL_KEY')}` }
    }).then((res) => {
      // Si le tableau n'est pas vide, c'est gagné !
      if (res.body.data.length > 0) return res.body.data[0];
      
      // Sinon, on respire un coup et on réessaie
      cy.wait(1000); 
      return verifier();
    });
  };
  return verifier();
});

Et maintenant, le test qui fait plaisir :

it('doit permettre une inscription complète sans accroc', () => {
  // 1. On remplit le formulaire
  cy.visit('/signup');
  cy.get('input[name="email"]').type(testEmail);
  cy.get('button[type="submit"]').click();

  // 2. Le moment de vérité
  cy.attendreMonPrecieuxEmail(testAddressId).then((email) => {
    expect(email.subject).to.contain('Bienvenue à bord !');
    
    // 3. Extraction chirurgicale du lien de validation
    const lienValidation = /href="([^"]+)"/.exec(email.bodyHtml)[1];
    
    // 4. Bouclage de la boucle
    cy.visit(lienValidation);
    cy.contains('Compte confirmé').should('be.visible');
  });
});

Playwright : Pour ceux qui aiment `await`

Avec Playwright, c'est encore plus simple. Pas besoin de commandes complexes, le JavaScript moderne fait le travail.

test('Reset de mot de passe : le crash test', async ({ page }) => {
  // ... on passe les étapes de remplissage ...
  await page.click('#reset-password-btn');

  // La boucle d'attente (Polling)
  // On se donne 10 essais de 2 secondes. Soyons généreux.
  let emailTrouve = null;
  for (let i = 0; i < 10; i++) {
    const res = await api.get(`/emails?address_id=${addressId}`); 
    if (res.data.length > 0) {
      emailTrouve = res.data[0];
      break;
    }
    await page.waitForTimeout(2000);
  }

  expect(emailTrouve).not.toBeNull();
  expect(emailTrouve.subject).toBe('Réinitialisez votre mot de passe (vite !)');
});

Conclusion : Arrêtez de souffrir

Tester les emails ne devrait pas être la partie la plus douloureuse de votre pipeline CI/CD. Avec JunkMail Business, vous transformez une corvée aléatoire en une science exacte.

Vos tests passent au vert, votre équipe QA vous sourit à nouveau, et vous pouvez enfin rentrer chez vous à l'heure.

Elle n'est pas belle la vie ?