Mehrseitiges Registrierungsformular prüfen

Unsere Empfehlung vorab. Wir machen Proxy Mail QA, sind also nicht neutral. Für eine Registrierung über mehrere Bildschirme empfehlen wir es, um ein Testkonto über alle hinweg zu behalten, mit Werten, die zu den Feldern jedes Bildschirms passen, und für die Bestätigungs-E-Mail, wo auch immer im Ablauf sie gesendet wird. Heute klappt das am besten über einen KI-Agent oder einen automatisierten Test. Von Hand füllt Proxy Mail QA for Chrome den ersten Bildschirm aus, den mit dem E-Mail-Feld, und die späteren tippst du. Proxy Mail QA drückt nie Weiter und sendet nie ab, und es weiß nicht, was in Felder gehört, die nur deine App hat, etwa Firmengröße oder „Wie hast du von uns erfahren?“: Die füllt dein Agent oder Test aus.

Warum mehrseitige Registrierungen kaputtgehen

• Das Konto muss mitgehen. Bildschirm 2 gehört zu dem Konto, das auf Bildschirm 1 angelegt wurde. Ein Test, der auf jedem Bildschirm einen neuen Namen oder eine neue Adresse nutzt, erzeugt ein Konto, das kein echter Mensch hätte.
• Spätere Bildschirme fragen, was nur deine App fragt. Jedes Mal dieselben Antworten zu tippen ist langsam, und jeder Tester wählt andere, also lassen sich Ergebnisse nicht vergleichen.
• Manche Bildschirme kommen, nachdem das Konto existiert. Onboarding-Fragen erscheinen oft nach der Bestätigungs-E-Mail, also muss der Test die E-Mail und die Bildschirme drumherum abdecken.
• Leute brechen mittendrin ab. Sie drücken Zurück, laden neu, schließen den Tab und kommen morgen wieder.
• Die Bildschirme ändern sich. Eine Frage wandert von Bildschirm 3 auf Bildschirm 2, und ein Test, der die Felder jedes Bildschirms auflistet, veraltet.

Was zu prüfen ist

1. Jeder Bildschirm gehört zum selben Konto: Der Name auf dem letzten Bildschirm passt zum ersten.
2. Eine Pflichtfrage auf einem späteren Bildschirm lässt sich nicht überspringen, und die Seite sagt, warum.
3. Zurück behält das Eingegebene, und Weiter nach Zurück legt kein zweites Konto an.
4. Neu laden auf einem späteren Bildschirm oder Verlassen und Zurückkommen macht entweder dort weiter, wo die Person war, oder beginnt sauber von vorn. Ein halb angelegtes Konto darf die E-Mail-Adresse nicht für eine erneute Registrierung blockieren.
5. Die Schrittanzeige („Schritt 2 von 3“) stimmt, und du kannst nicht vorspringen, indem du die URL eines späteren Bildschirms eintippst.
6. Die Bestätigungs-E-Mail kommt genau einmal an, egal welcher Bildschirm sie sendet.
7. Wer bestätigt, aber nicht abgeschlossen hat, kann sich anmelden und landet wieder auf dem unfertigen Bildschirm.
8. Antworten von späteren Bildschirmen bleiben erhalten: Sie erscheinen im Konto oder in der Willkommens-E-Mail, die sie verwendet.

Mit einem KI-Agent

form_values beantwortet einen Bildschirm nach dem anderen. Auf dem ersten Bildschirm erstellt es eine neue Testadresse und gibt Werte für E-Mail, Namen, Benutzername, Passwort, Geburtsdatum und Land zurück. Auf jedem weiteren Bildschirm sendet der Agent die Felder dieses Bildschirms mit derselben address, damit das Konto erhalten bleibt. Felder, die es nicht erkennt, kommen leer mit einem Hinweis zurück, und der Agent füllt sie selbst aus.

Mit Proxy Mail QA verbunden in Qoder (Marketplace):

Sign up at https://staging.acme.dev/signup with Proxy Mail QA and go through every
screen of the sign-up. Start a run.
On the first screen, use form_values with the page's fields. On every later screen,
use form_values again with the same address. For fields it leaves empty, use these
answers: company size "11-50", role "Engineering", heard about us "Search".
Note the time before each Next, and when the verification email comes, finish it with
the code or link and carry on.
Then check the list below, finish the run and give me the report.

Füge die acht Prüfungen oben unter dem Prompt ein. Wenn du die Antworten für deine eigenen Felder im Prompt angibst, bleiben sie bei jedem Lauf gleich.

In einem Playwright-Test

Rufe mit dem Paket proxymail-qa npm auf jedem Bildschirm formValues auf und gib die Adresse des ersten Bildschirms an die übrigen weiter:

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

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

// What the page says about each field, as formValues expects it.
const readFields = (form: Locator) =>
  form.locator('input, select').evaluateAll((elements) =>
    elements.map((el, i) => {
      const input = el as HTMLInputElement & HTMLSelectElement;
      input.dataset.field = String(i);
      return {
        id: String(i),
        type: input.tagName === 'SELECT' ? 'select' : input.type,
        name: input.name,
        label: input.labels?.[0]?.textContent ?? input.getAttribute('aria-label') ?? '',
        autocomplete: input.getAttribute('autocomplete') ?? '',
        pattern: input.pattern || undefined,
        minLength: input.minLength > 0 ? input.minLength : undefined,
        maxLength: input.maxLength > 0 ? input.maxLength : undefined,
        options: input.tagName === 'SELECT' ? Array.from(input.options, (o) => ({ value: o.value, label: o.text })) : undefined,
      };
    }),
  );

const fill = async (form: Locator, values: { id: string; value: string | null }[]) => {
  for (const { id, value } of values) {
    if (value === null) continue;
    const field = form.locator(`[data-field="${id}"]`);
    if (await field.evaluate((el) => el.tagName === 'SELECT')) await field.selectOption(value);
    else await field.fill(value);
  }
};

test('one account across every screen of the sign-up', async ({ page }) => {
  await page.goto('/signup');
  const form = page.locator('form');

  const first = await qa.formValues({ fields: await readFields(form) });
  await fill(form, first.values);
  const submitted = new Date();
  await page.getByRole('button', { name: 'Continue' }).click();

  await page.waitForURL('**/signup/about-you');
  const second = await qa.formValues({ fields: await readFields(form), address: first.address });
  await fill(form, second.values);
  await form.getByLabel('Company size').selectOption('11-50'); // your app's own field
  await page.getByRole('button', { name: 'Finish' }).click();

  const { value: code } = await qa.waitForCode(first.address, { since: submitted });
  await page.getByLabel('Code').fill(code);
  await expect(page).toHaveURL(/welcome/);

  expect((await qa.countEmails(first.address, { since: submitted, type: 'code' })).count).toBe(1);
  await qa.deleteAddress(first.address);
});

Dasselbe Konto bekommt auf jedem Bildschirm denselben Namen und dasselbe Geburtsdatum. Ein Fehler auf Bildschirm 2 liegt also an deiner App, nicht an den Testdaten.

Von Hand, mit Proxy Mail QA for Chrome

In der aktuellen Version im Chrome Web Store (0.8.0):

1. Schalte die Erweiterung für deine Website ein und klicke auf dem ersten Bildschirm auf die Schaltfläche Proxy Mail QA im E-Mail-Feld. Sie füllt dort E-Mail, Namen, Benutzername, Geburtsdatum und Passwort aus.
2. Spätere Bildschirme haben kein E-Mail-Feld und bekommen daher nicht die Schaltfläche, die das Testkonto ausfüllt. Tippe die Werte ein und kopiere Namen, Benutzername oder Geburtsdatum des Testkontos von seiner Adresse in der App, wo es für jeden Wert eine Kopieren-Schaltfläche gibt.
3. Wenn die Bestätigungs-E-Mail ankommt, erscheinen Code oder Link auf der Seite, mit Ausfüllen oder Öffnen, wie bei einem einseitigen Formular.

Was Proxy Mail QA hier nicht tut

• Weiter oder Absenden drücken. Du, dein Agent oder dein Test entscheidet, was auf jedem Bildschirm getestet wird.
• Deine eigenen Felder ausfüllen, derzeit. Unternehmensgröße, Tarif und ähnliche Fragen füllt der Agent oder der Test aus, oder du tippst sie von Hand.
• SMS- oder Telefonbestätigung auf einem späteren Bildschirm: Es empfängt nur E-Mails. Nutze die Testnummern deines SMS-Anbieters.
• Ein Zahlungsbildschirm. Nutze den Testmodus und die Testkarten deines Zahlungsanbieters. Proxy Mail QA füllt nie Kartenfelder aus.

Für den ersten Bildschirm allein siehe Ein einfaches Registrierungsformular prüfen.