Vérifier un formulaire d’inscription en plusieurs pages

Notre recommandation, d’emblée. Nous éditons Proxy Mail QA, nous ne sommes donc pas neutres. Pour une inscription sur plusieurs écrans, nous le recommandons pour garder un seul compte de test sur tous les écrans, avec des valeurs adaptées aux champs de chacun, et pour l’e-mail de vérification, où qu’il soit envoyé dans le parcours. Aujourd’hui, cela fonctionne le mieux via un agent IA ou un test automatisé. À la main, Proxy Mail QA for Chrome remplit le premier écran, celui avec le champ e-mail, et vous saisissez les suivants. Proxy Mail QA n’appuie jamais sur Suivant et ne valide jamais, et il ne sait pas quoi mettre dans les champs propres à votre app, comme la taille de l’entreprise ou « Comment nous avez-vous connus ? » : votre agent ou votre test les remplit.

Pourquoi les inscriptions en plusieurs pages cassent

• Le compte doit suivre. L’écran 2 appartient au compte créé à l’écran 1. Un test qui utilise un nouveau nom ou une nouvelle adresse à chaque écran crée un compte qu’aucune vraie personne n’aurait.
• Les écrans suivants posent des questions propres à votre app. Saisir les mêmes réponses à chaque exécution est lent, et chaque testeur en choisit d’autres, donc les résultats ne sont pas comparables.
• Certains écrans viennent après la création du compte. Les questions d’accueil apparaissent souvent après l’e-mail de vérification, donc le test doit couvrir l’e-mail et les écrans autour.
• Les gens abandonnent en cours de route. Ils appuient sur Retour, actualisent, ferment l’onglet et reviennent le lendemain.
• Les écrans changent. Une question passe de l’écran 3 à l’écran 2, et un test qui liste les champs de chaque écran devient obsolète.

À vérifier

1. Chaque écran appartient au même compte : le nom du dernier écran correspond au premier.
2. Une question obligatoire sur un écran suivant ne peut pas être ignorée, et la page dit pourquoi.
3. Retour conserve ce qui a été saisi, et Suivant après Retour ne crée pas de second compte.
4. Actualiser un écran suivant, ou partir et revenir, reprend là où la personne en était ou recommence proprement. Un compte à moitié créé ne doit pas empêcher l’adresse e-mail de s’inscrire à nouveau.
5. L’indicateur d’étape (« Étape 2 sur 3 ») est correct, et on ne peut pas sauter une étape en saisissant l’URL d’un écran suivant.
6. L’e-mail de vérification n’arrive qu’une fois, quel que soit l’écran qui l’envoie.
7. Une personne qui a vérifié son adresse sans terminer peut se connecter et revient à l’écran inachevé.
8. Les réponses des écrans suivants sont conservées : elles apparaissent sur le compte, ou dans l’e-mail de bienvenue qui les utilise.

Avec un agent IA

form_values répond écran par écran. Sur le premier écran, il crée une nouvelle adresse de test et renvoie des valeurs pour l’e-mail, les noms, le nom d’utilisateur, le mot de passe, la date de naissance et le pays. Sur chaque écran suivant, l’agent envoie les champs de cet écran avec le même address, pour que le compte soit conservé. Les champs qu’il ne reconnaît pas reviennent vides avec une note, et l’agent les remplit lui-même.

Avec Proxy Mail QA connecté dans 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.

Collez les huit vérifications ci-dessus sous le prompt. Donner dans le prompt les réponses pour vos propres champs les garde identiques à chaque exécution.

Dans un test Playwright

Avec le paquet npm proxymail-qa, appelez formValues sur chaque écran et transmettez l’adresse du premier écran aux suivants :

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);
});

Le même compte reçoit le même nom et la même date de naissance sur chaque écran : un échec sur l’écran 2 vient donc de votre app, pas des données de test.

À la main, avec Proxy Mail QA for Chrome

Dans la version actuelle du Chrome Web Store (0.8.0) :

1. Activez l’extension pour votre site et, sur le premier écran, cliquez sur le bouton Proxy Mail QA dans le champ e-mail. Il y remplit l’e-mail, les noms, le nom d’utilisateur, la date de naissance et le mot de passe.
2. Les écrans suivants n’ont pas de champ e-mail, donc pas de bouton qui remplit le compte de test. Saisissez-les en copiant le nom, le nom d’utilisateur ou la date de naissance du compte de test depuis son adresse dans l’app, où chacun a un bouton Copier.
3. Quand l’e-mail de vérification arrive, son code ou son lien s’affiche dans la page, avec Remplir ou Ouvrir, comme sur un formulaire à un seul écran.

Ce que Proxy Mail QA ne fait pas ici

• Appuyer sur Suivant ou envoyer. C’est vous, votre agent ou votre test qui décidez de ce qui est testé sur chaque écran.
• Remplir vos propres champs, aujourd’hui. La taille de l’entreprise, l’offre et les questions similaires sont remplies par l’agent ou le test, ou saisies à la main.
• Une vérification par SMS ou téléphone sur un écran suivant : il ne reçoit que des e-mails. Utilisez les numéros de test de votre fournisseur SMS.
• Un écran de paiement. Utilisez le mode test et les cartes de test de votre fournisseur de paiement. Proxy Mail QA ne remplit jamais les champs de carte.

Pour le premier écran seul, voir Vérifier un formulaire d’inscription simple.