Revisa un formulario de registro de varias páginas

Nuestra recomendación, de entrada. Nosotros hacemos Proxy Mail QA, así que no somos neutrales. Para un registro que ocupa varias pantallas, lo recomendamos para mantener una sola cuenta de prueba en todas, con valores que encajan en los campos de cada pantalla, y para el correo de verificación en cualquier punto del flujo en que se envíe. Hoy funciona mejor con un agente de IA o una prueba automatizada. A mano, Proxy Mail QA for Chrome rellena la primera pantalla, la del campo de correo, y tú escribes las siguientes. Proxy Mail QA nunca pulsa Siguiente ni envía el formulario, y no sabe qué poner en campos que solo tiene tu app, como el tamaño de la empresa o “¿Cómo nos conociste?”: esos los rellena tu agente o tu prueba.

Por qué fallan los registros de varias páginas

• La cuenta tiene que mantenerse. La pantalla 2 pertenece a la cuenta creada en la pantalla 1. Una prueba que usa un nombre o una dirección nuevos en cada pantalla crea una cuenta que ninguna persona real tendría.
• Las pantallas siguientes preguntan lo que solo pregunta tu app. Escribir las mismas respuestas en cada ejecución es lento, y cada tester elige unas distintas, así que los resultados no se pueden comparar.
• Algunas pantallas llegan cuando la cuenta ya existe. Las preguntas de bienvenida suelen aparecer después del correo de verificación, así que la prueba tiene que cubrir el correo y las pantallas que lo rodean.
• La gente abandona a mitad. Pulsa Atrás, recarga, cierra la pestaña y vuelve al día siguiente.
• Las pantallas cambian. Una pregunta pasa de la pantalla 3 a la 2, y una prueba que enumera los campos de cada pantalla queda desactualizada.

Qué comprobar

1. Todas las pantallas pertenecen a la misma cuenta: el nombre de la última pantalla coincide con el de la primera.
2. Una pregunta obligatoria en una pantalla posterior no se puede omitir, y la página explica por qué.
3. Atrás conserva lo escrito, y Siguiente después de Atrás no crea una segunda cuenta.
4. Recargar una pantalla posterior, o salir y volver, retoma donde estaba la persona o empieza de nuevo sin problemas. Una cuenta a medio crear no debe impedir que esa dirección de correo se registre otra vez.
5. El indicador de pasos (“Paso 2 de 3”) es correcto, y no puedes saltar adelante escribiendo la URL de una pantalla posterior.
6. El correo de verificación llega una sola vez, sin importar qué pantalla lo envíe.
7. Quien verificó pero no terminó puede iniciar sesión y vuelve a la pantalla sin terminar.
8. Las respuestas de las pantallas posteriores se conservan: aparecen en la cuenta o en el correo de bienvenida que las usa.

Con un agente de IA

form_values responde una pantalla a la vez. En la primera pantalla crea una nueva dirección de prueba y devuelve valores para el correo, los nombres, el nombre de usuario, la contraseña, la fecha de nacimiento y el país. En cada pantalla posterior, el agente envía los campos de esa pantalla con el mismo address, para que la cuenta se mantenga. Los campos que no reconoce vuelven vacíos con una nota, y el agente los rellena por su cuenta.

Con Proxy Mail QA conectado en 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.

Pega las ocho comprobaciones de arriba debajo del prompt. Si das en el prompt las respuestas para tus propios campos, serán las mismas en cada ejecución.

En una prueba de Playwright

Con el paquete proxymail-qa de npm, llama a formValues en cada pantalla y pasa la dirección de la primera pantalla a las demás:

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

La misma cuenta recibe el mismo nombre y la misma fecha de nacimiento en todas las pantallas, así que un fallo en la pantalla 2 se debe a tu app, no a los datos de prueba.

A mano, con Proxy Mail QA for Chrome

En la versión disponible hoy en Chrome Web Store (0.8.0):

1. Activa la extensión para tu sitio y, en la primera pantalla, haz clic en el botón Proxy Mail QA del campo de correo. Rellena ahí el correo, los nombres, el nombre de usuario, la fecha de nacimiento y la contraseña.
2. Las pantallas posteriores no tienen campo de correo, así que no reciben el botón que rellena la cuenta de prueba. Escríbelos copiando el nombre, el nombre de usuario o la fecha de nacimiento de la cuenta de prueba desde su dirección en la app, donde cada uno tiene un botón Copiar.
3. Cuando llega el correo de verificación, su código o enlace aparece en la página, con Rellenar o Abrir, como en un formulario de una sola pantalla.

Lo que Proxy Mail QA no hace aquí

• Pulsar Siguiente o enviar. Tú, tu agente o tu prueba deciden qué se prueba en cada pantalla.
• Rellenar tus propios campos, por ahora. El tamaño de la empresa, el plan y preguntas similares los rellena el agente o la prueba, o se escriben a mano.
• Verificación por SMS o teléfono en una pantalla posterior: solo recibe correo. Usa los números de prueba de tu proveedor de SMS.
• Una pantalla de pago. Usa el modo de prueba y las tarjetas de prueba de tu proveedor de pagos. Proxy Mail QA nunca rellena campos de tarjeta.

Para la primera pantalla por sí sola, consulta Revisar un formulario de registro simple.