Tschüss wackelige E-Mail-Tests: Automatisieren Sie alles mit Cypress & Playwright (und behalten Sie Ihre Haare)

Kennen Sie dieses Gefühl tiefer Einsamkeit?

Es ist das Gefühl, wenn Ihr E2E-Test zum vierten Mal in Folge abstürzt, weil Ihr Mock-SMTP-Server beschlossen hat, ein Nickerchen zu machen. Oder schlimmer noch, der Moment, in dem Sie Ihrem Product Owner erklären müssen, dass der Fehler in der Produktion unbemerkt blieb, weil "wir den E-Mail-Versand in der Testumgebung simulieren, wir tun es nicht wirklich".

Seien wir ehrlich: E-Mails in einem Benutzerfluss (Registrierung, Passwort-Reset, OTP) zu testen, ist oft der Albtraum eines jeden Entwicklers. Es ist langsam, es ist zerbrechlich ("flaky", wie unsere englischsprachigen Freunde sagen), und offen gesagt, es nervt.

Aber was wäre, wenn ich Ihnen sagen würde, dass es eine Welt gibt, in der Ihre E-Mail-Tests so schnell und zuverlässig sind wie Ihre Unit-Tests? Eine Welt, in der Sie eine echte Adresse herbeirufen, eine echte E-Mail empfangen und auf einen echten Link klicken können, alles in wenigen Millisekunden?

Willkommen in der Zukunft. Willkommen bei JunkMail.

Warum Ihre aktuellen Tests Sie hassen

Im Allgemeinen gibt es zwei Schulen:

Die "Ich mocke alles"-Schule: Sie fangen die API-Anfrage ab und sagen Ihrem Frontend: "Keine Sorge, die E-Mail ist raus". Außer an dem Tag, an dem SendGrid seine Konfiguration ändert oder Ihre HTML-Vorlage kaputt geht, und Sie sehen absolut nichts.
Die "Mailtrap / Mailhog"-Schule: Das ist besser. Aber es ist oft langsam, im Volumen begrenzt und testet nicht die echte Zustellbarkeit (SPF, DKIM, DMARC... diese barbarischen Akronyme, die entscheiden, ob eine E-Mail ankommt oder nicht).

Wir brauchen einen dritten Weg: eine echte, ephemere Infrastruktur, die per API gesteuert wird.

Die Geheimwaffe: Die JunkMail Business API

Stellen Sie sich vor, Sie könnten ein frisch erstelltes Postfach mit einem Fingerschnippen (oder eher einem POST-Aufruf) herbeirufen, es nutzen und es im digitalen Nirwana verschwinden lassen, sobald Ihr Test beendet ist. Sauber. Effizient.

Genau das werden wir tun.

Schritt 1: Die Geister rufen (Eine Adresse erstellen)

Bevor wir Cypress oder Playwright starten, brauchen wir ein Ziel. Nicht test@test.com (der Arme bekommt schon genug Spam), sondern eine einzigartige Adresse für diesen spezifischen Testlauf.

// Setup-Skript (oder in Ihrem beforeEach)
const response = await fetch('https://api.junkmail.site/v1/addresses', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer IHR_GLÄNZENDER_BUSINESS_KEY', 
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ alias: 'e2e-signup-test' })
});

const { data } = await response.json();
const meineMagischeAdresse = data.address; // z.B.: xkcd42@junkmail.site

Boom. Sie haben eine Adresse. Sie lebt. Sie atmet.

Cypress: Die Kunst des Wartens, ohne den Verstand zu verlieren

Cypress ist großartig, aber es mag es nicht besonders, den Browser zu verlassen. Um unsere E-Mails zu überprüfen, müssen wir cy.request und ein wenig rekursive Magie verwenden.

Lassen Sie uns einen benutzerdefinierten Befehl erstellen, denn wir sind zivilisierte Menschen:

// cypress/support/commands.js
Cypress.Commands.add('warteAufMeineKostbareEmail', (addressId) => {
  const pruefen = () => {
    return cy.request({
      method: 'GET',
      url: `https://api.junkmail.site/v1/emails?address_id=${addressId}`,
      headers: { 'Authorization': `Bearer ${Cypress.env('JUNKMAIL_KEY')}` }
    }).then((res) => {
      // Wenn das Array nicht leer ist, haben wir gewonnen!
      if (res.body.data.length > 0) return res.body.data[0];
      
      // Ansonsten atmen wir durch und versuchen es erneut
      cy.wait(1000); 
      return pruefen();
    });
  };
  return pruefen();
});

Und nun der Test, der wirklich Freude bereitet:

it('sollte eine vollständige Registrierung ohne Probleme ermöglichen', () => {
  // 1. Wir füllen das Formular aus
  cy.visit('/signup');
  cy.get('input[name="email"]').type(testEmail);
  cy.get('button[type="submit"]').click();

  // 2. Der Moment der Wahrheit
  cy.warteAufMeineKostbareEmail(testAddressId).then((email) => {
    expect(email.subject).to.contain('Willkommen an Bord!');
    
    // 3. Chirurgische Extraktion des Bestätigungslinks
    const validierungsLink = /href="([^"]+)"/.exec(email.bodyHtml)[1];
    
    // 4. Den Kreis schließen
    cy.visit(validierungsLink);
    cy.contains('Konto bestätigt').should('be.visible');
  });
});

Es ist flüssig. Es ist robust. Es ist schön.

Playwright: Für diejenigen, die `await` lieben

Mit Playwright ist es noch einfacher. Keine komplexen Befehle nötig; modernes JavaScript erledigt die Arbeit.

test('Passwort-Reset: Der Härtetest', async ({ page }) => {
  // ... überspringen wir das Ausfüllen des Formulars ...
  await page.click('#reset-password-btn');

  // Die Warteschleife (Polling)
  // Geben wir ihm 10 Versuche à 2 Sekunden. Seien wir großzügig.
  let gefundeneEmail = null;
  for (let i = 0; i < 10; i++) {
    const res = await api.get(`/emails?address_id=${addressId}`); // Pseudocode zur Verdeutlichung
    if (res.data.length > 0) {
      gefundeneEmail = res.data[0];
      break;
    }
    await page.waitForTimeout(2000);
  }

  expect(gefundeneEmail).not.toBeNull();
  expect(gefundeneEmail.subject).toBe('Setzen Sie Ihr Passwort zurück (schnell!)');
});

Fazit: Beenden Sie das Leiden

E-Mail-Tests sollten nicht der schmerzhafteste Teil Ihrer CI/CD-Pipeline sein. Mit JunkMail Business verwandeln Sie eine zufällige lästige Pflicht in eine exakte Wissenschaft.

Ihre Tests werden grün, Ihr QA-Team lächelt wieder, und Sie können endlich pünktlich nach Hause gehen.

Ist das Leben nicht schön?