Vérifier un formulaire d’inscription simple : e-mail, mot de passe, terminé

Notre recommandation, d’emblée. Nous développons Proxy Mail QA, nous ne sommes donc pas neutres. Pour un court formulaire d’inscription (un e-mail, un mot de passe, éventuellement un nom), nous le recommandons pour une seule chose : une nouvelle adresse de test pour chaque essai et l’e-mail de vérification qui suit, que vous vérifiiez à la main avec Proxy Mail QA for Chrome, via un agent IA ou dans un test automatisé. La plupart de la liste ci-dessous ne demande aucun produit. Proxy Mail QA ne vérifie ni la mise en page ni les textes, et ne remplit ni n’envoie le formulaire pour un agent ou un test : ils le font eux-mêmes.

La liste de vérification

Le champ e-mail

1. C’est un type="email" avec autocomplete="email", pour que les téléphones affichent le clavier avec @ et que les navigateurs proposent la bonne adresse.
2. Il accepte les adresses valides mais inhabituelles : majuscules, suffixe avec plus (jane+acme@mailclub.dev), apostrophe (o'brien@mailclub.dev). Il refuse celles sans @ ou avec deux.
3. Une adresse déjà enregistrée reçoit une réponse sensée : soit « Vous avez déjà un compte » avec un lien de connexion, soit « Consultez vos e-mails » dans tous les cas, si vous ne voulez pas révéler qui a un compte.

Le champ mot de passe

4. Les règles sont affichées avant la saisie, et ce sont les mêmes que celles appliquées par le serveur.
5. C’est un type="password" avec autocomplete="new-password", il autorise le collage et permet d’afficher ce qui a été saisi.
6. Un mot de passe trop court produit une erreur au niveau du champ, qui énonce la règle. (Sinon, voir Pourquoi mon formulaire d’inscription n’affiche-t-il pas les erreurs de mot de passe ?)
7. Un mot de passe long, de 64 caractères, est accepté et permet ensuite de se connecter.

L’envoi

8. Un clic crée un compte et envoie un e-mail, même si le bouton est pressé deux fois.
9. Le bouton indique que le traitement est en cours, et les erreurs du serveur s’affichent sur la page au lieu de disparaître.

L’e-mail

10. Il arrive en moins d’une minute.
11. Son lien mène au site que vous testez, pas à localhost ni à la production, et toute expiration indiquée est exacte.
12. Le code ou le lien termine l’inscription, et ne fonctionne qu’une fois.

À la main, en dix minutes environ

1. Installez Proxy Mail QA for Chrome, ouvrez votre page d’inscription et choisissez Activer pour ce site dans sa fenêtre.
2. Cliquez sur le bouton Proxy Mail QA dans le champ e-mail pour remplir le formulaire avec un nouveau compte de test : e-mail, nom s’il y en a un, et un mot de passe conforme aux règles du champ.
3. Pour les vérifications 6 et 7, cliquez sur le bouton clé dans le champ mot de passe et ouvrez la liste Mots de passe limites de sa fiche (« Devrait être accepté », « Devrait être refusé »), puis essayez-en quelques-uns. Pour la vérification 2, ajoutez un suffixe avec plus à l’adresse dans le champ avant d’envoyer : un e-mail à +anything arrive toujours dans la même boîte de réception de test, et s’affiche dans l’app plutôt que dans la page.
4. Envoyez. Quand l’e-mail arrive, le code s’affiche dans la page avec Remplir et Copier, ou le lien avec Ouvrir.
5. Lisez l’e-mail en entier une fois dans l’app, où un lien vers localhost est signalé sur la ligne de l’adresse.

Avec un agent IA

Avec Proxy Mail QA connecté à votre agent (dans Qoder, depuis la Marketplace), demandez :

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.

Collez la liste ci-dessus sous le prompt, pour que l’agent rende compte point par point.

Dans un test automatisé

Avec le paquet npm proxymail-qa et Playwright, les vérifications 8 à 12 s’exécutent à chaque modification :

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 fait ignorer à l’attente tout ce qui a été envoyé avant l’envoi du formulaire : une nouvelle tentative ne récupère jamais un ancien lien.

Ce que cela ne couvre pas

• L’apparence et les textes du formulaire. Regardez-le vous-même, aussi sur un téléphone.
• L’accessibilité et la vitesse : lancez Lighthouse et axe DevTools, et remplissez le formulaire au clavier seul.
• Les codes SMS et la connexion via réseaux sociaux : Proxy Mail QA ne reçoit que des e-mails.
• Un fournisseur d’e-mail en mode sandbox ou test n’envoie qu’aux adresses vérifiées : rien n’arrive dans une boîte de réception de test tant qu’il n’est pas configuré pour la production.

Pour un formulaire qui demande davantage (date de naissance, pays, second écran), voir Vérifier un formulaire d’inscription sur plusieurs pages.