Revisar un formulario de registro simple: correo, contraseña, listo

Nuestra recomendación, de entrada. Creamos Proxy Mail QA, así que no somos neutrales. Para un formulario de registro corto (un correo, una contraseña, quizá un nombre) lo recomendamos para una sola cosa: una dirección de prueba nueva en cada intento y el correo de verificación que le sigue, ya sea que compruebes a mano con Proxy Mail QA for Chrome, mediante un agente de IA o en una prueba automatizada. La mayor parte de la lista de abajo no necesita ningún producto. Proxy Mail QA no revisa el diseño ni el texto, y no rellena ni envía el formulario por un agente o una prueba: eso lo hacen ellos.

La lista de comprobación

El campo de correo

1. Es type="email" con autocomplete="email", así que los teléfonos muestran el teclado con @ y los navegadores sugieren la dirección correcta.
2. Acepta direcciones válidas pero poco comunes: mayúsculas, una etiqueta con más (jane+acme@mailclub.dev), un apóstrofo (o'brien@mailclub.dev). Rechaza las que no tienen @ o tienen dos.
3. Una dirección ya registrada recibe una respuesta razonable: o “Ya tienes una cuenta” con un enlace para iniciar sesión, o “Revisa tu correo” en ambos casos, si no quieres revelar quién tiene cuenta.

El campo de contraseña

4. Las reglas se muestran antes de escribir y son las mismas que aplica el servidor.
5. Es type="password" con autocomplete="new-password", permite pegar y tiene una forma de mostrar lo escrito.
6. Una contraseña demasiado corta muestra un error en el campo que indica la regla. (Si no, consulta ¿Por qué mi formulario de registro no muestra errores de contraseña?)
7. Una contraseña larga, de 64 caracteres, se acepta y luego permite iniciar sesión.

Envío

8. Un clic crea una cuenta y envía un correo, aunque se pulse el botón dos veces.
9. El botón muestra que está trabajando, y los errores del servidor aparecen en la página en lugar de desaparecer.

El correo

10. Llega en menos de un minuto.
11. Su enlace lleva al sitio que estás probando, no a localhost ni a producción, y cualquier caducidad que indique es cierta.
12. El código o enlace completa el registro y funciona una sola vez.

A mano, en unos diez minutos

1. Instala Proxy Mail QA for Chrome, abre tu página de registro y elige Activar en este sitio en su ventana emergente.
2. Haz clic en el botón Proxy Mail QA del campo de correo para rellenar el formulario con una nueva cuenta de prueba: correo, nombre si lo hay y una contraseña que cumple las reglas del campo.
3. Para las comprobaciones 6 y 7, haz clic en el botón de llave del campo de contraseña, abre la lista Contraseña de caso límite de su tarjeta (“Debería aceptarse”, “Debería rechazarse”) y prueba algunas. Para la comprobación 2, añade una etiqueta con más a la dirección del campo antes de enviar: el correo a +anything sigue llegando a la misma bandeja de entrada de prueba, y aparece en la app en lugar de en la página.
4. Envía. Cuando llegue el correo, el código aparece en la página con Rellenar y Copiar, o el enlace con Abrir.
5. Lee el correo completo una vez en la app, donde un enlace a localhost se marca en la fila de la dirección.

Con un agente de IA

Con Proxy Mail QA conectado a tu agente (en Qoder, desde el Marketplace), pide:

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.

Pega la lista de arriba debajo del prompt, para que el agente informe según ella.

En una prueba automatizada

Con el paquete proxymail-qa de npm y Playwright, las comprobaciones 8 a 12 se ejecutan en cada cambio:

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 hace que la espera ignore todo lo enviado antes de enviar el formulario, así que un reintento nunca toma un enlace antiguo.

Qué no cubre esto

• Cómo se ve y se lee el formulario. Míralo tú, también en un teléfono.
• Accesibilidad y velocidad: ejecuta Lighthouse y axe DevTools, y rellena el formulario solo con el teclado.
• Códigos SMS e inicio de sesión social: Proxy Mail QA solo recibe correo.
• Un proveedor de correo en modo sandbox o de prueba solo envía a direcciones que hayas verificado, así que nada llega a una bandeja de entrada de prueba hasta que esté configurado para producción.

Para un formulario que pide más (fecha de nacimiento, país, una segunda pantalla), consulta Revisar un formulario de registro de varias páginas.