Ein einfaches Registrierungsformular prüfen: E-Mail, Passwort, fertig

Unsere Empfehlung vorab. Wir entwickeln Proxy Mail QA, sind also nicht neutral. Für ein kurzes Registrierungsformular (E-Mail, Passwort, vielleicht ein Name) empfehlen wir es für eine Sache: eine neue Testadresse für jeden Versuch und die anschließende Bestätigungs-E-Mail, ob du von Hand mit Proxy Mail QA for Chrome prüfst, über einen KI-Agent oder in einem automatisierten Test. Für den Großteil der Checkliste unten brauchst du gar kein Produkt. Proxy Mail QA prüft weder Layout noch Texte und füllt das Formular nicht für einen Agent oder Test aus oder sendet es ab: Das machen sie selbst.

Die Checkliste

Das E-Mail-Feld

1. Es ist type="email" mit autocomplete="email", sodass Handys die @-Tastatur zeigen und Browser die richtige Adresse vorschlagen.
2. Es akzeptiert gültige, aber ungewöhnliche Adressen: Großbuchstaben, ein Plus-Tag (jane+acme@mailclub.dev), ein Apostroph (o'brien@mailclub.dev). Es lehnt Adressen ohne @ oder mit zwei ab.
3. Eine bereits registrierte Adresse bekommt eine sinnvolle Antwort: entweder „Du hast bereits ein Konto“ mit einem Anmeldelink oder in jedem Fall „Prüfe deine E-Mails“, wenn du nicht verraten willst, wer ein Konto hat.

Das Passwortfeld

4. Die Regeln werden angezeigt, bevor jemand tippt, und es sind dieselben Regeln, die der Server durchsetzt.
5. Es ist type="password" mit autocomplete="new-password", erlaubt Einfügen und bietet eine Möglichkeit, das Getippte anzuzeigen.
6. Ein zu kurzes Passwort erzeugt am Feld einen Fehler, der die Regel nennt. (Falls nicht, siehe Warum zeigt mein Registrierungsformular keine Passwortfehler an?)
7. Ein langes Passwort mit 64 Zeichen wird akzeptiert und funktioniert danach bei der Anmeldung.

Absenden

8. Ein Klick erstellt ein Konto und sendet eine E-Mail, auch wenn die Schaltfläche zweimal gedrückt wird.
9. Die Schaltfläche zeigt, dass sie arbeitet, und Fehler vom Server erscheinen auf der Seite, statt zu verschwinden.

Die E-Mail

10. Sie kommt innerhalb einer Minute an.
11. Ihr Link führt zur getesteten Website, nicht zu localhost oder zur Produktion, und jede angegebene Ablaufzeit stimmt.
12. Der Code oder Link schließt die Registrierung ab und funktioniert nur einmal.

Von Hand, in etwa zehn Minuten

1. Installiere Proxy Mail QA for Chrome, öffne deine Registrierungsseite und wähle im Popup Für diese Website einschalten.
2. Klicke auf die Schaltfläche Proxy Mail QA im E-Mail-Feld, um das Formular mit einem neuen Testkonto auszufüllen: E-Mail, Name, falls vorhanden, und ein Passwort, das den Regeln des Felds entspricht.
3. Für die Prüfungen 6 und 7 klickst du auf die Schlüssel-Schaltfläche im Passwortfeld, öffnest auf der Karte die Liste Grenzfall-Passwörter („Sollte akzeptiert werden“, „Sollte abgelehnt werden“) und probierst einige aus. Für Prüfung 2 hängst du vor dem Absenden ein Plus-Tag an die Adresse im Feld: E-Mails an +anything landen trotzdem im selben Test-Posteingang und erscheinen in der App statt auf der Seite.
4. Sende ab. Wenn die E-Mail ankommt, erscheint der Code auf der Seite mit Ausfüllen und Kopieren, oder der Link mit Öffnen.
5. Lies die ganze E-Mail einmal in der App, wo ein Link zu localhost in der Zeile der Adresse markiert wird.

Mit einem KI-Agent

Wenn Proxy Mail QA mit deinem Agent verbunden ist (in Qoder über den Marketplace), frage:

Review the sign-up form at https://staging.acme.dev/signup with Proxy Mail QA.
Sign up with a new address and finish the verification. Check the email with
check_email (expect_host: staging.acme.dev) and count_emails: exactly one should come.
Try get_address_variants and get_password_variants (min_length 8, max_length 64) in
the fields, using a plus tag on the address for each new account.
Give me the twelve-point checklist below with pass or fail for each.

Füge die Checkliste oben unter dem Prompt ein, damit der Agent dazu berichtet.

In einem automatisierten Test

Mit dem Paket proxymail-qa npm und Playwright laufen die Prüfungen 8 bis 12 bei jeder Änderung:

import { expect, test } from '@playwright/test';
import { ProxyMailQA } from 'proxymail-qa';

const qa = new ProxyMailQA(); // reads PROXYMAIL_QA_API_KEY

test('sign-up sends one working verification link', async ({ page }) => {
  const { address, password } = await qa.createAddress({ password: true });
  const submitted = new Date();

  await page.goto('/signup');
  await page.getByLabel('Email').fill(address);
  await page.getByLabel('Password').fill(password);
  await page.getByRole('button', { name: 'Sign up' }).click();

  const { value: link } = await qa.waitForLink(address, { type: 'verify', since: submitted });
  const check = await qa.checkEmail(address, { since: submitted, type: 'link', expectHost: 'staging.acme.dev' });
  expect(check.failed).toEqual([]);

  await page.goto(link);
  await expect(page).toHaveURL(/welcome/);

  await new Promise((resolve) => setTimeout(resolve, 10_000)); // time for a duplicate
  expect((await qa.countEmails(address, { since: submitted, type: 'link' })).count).toBe(1);

  await qa.deleteAddress(address);
});

since sorgt dafür, dass das Warten alles ignoriert, was vor dem Absenden des Formulars gesendet wurde, sodass ein Wiederholungsversuch nie einen alten Link aufgreift.

Was das nicht abdeckt

• Wie das Formular aussieht und sich liest. Sieh es dir selbst an, auch auf einem Handy.
• Barrierefreiheit und Geschwindigkeit: Führe Lighthouse und axe DevTools aus und fülle das Formular nur mit der Tastatur aus.
• SMS-Codes und Social Login: Proxy Mail QA empfängt nur E-Mails.
• Ein E-Mail-Anbieter im Sandbox- oder Testmodus sendet nur an Adressen, die du bestätigt hast. Bis er für die Produktion eingerichtet ist, erreicht also nichts einen Test-Posteingang.

Für ein Formular, das mehr abfragt (Geburtsdatum, Land, einen zweiten Bildschirm), siehe Ein mehrseitiges Registrierungsformular prüfen.