Review a multi-page sign-up form

Our recommendation, up front. We make Proxy Mail QA, so we’re not neutral. For a sign-up that goes over several screens, we recommend it for keeping one test account across all of them, with values that fit each screen’s fields, and for the verification email wherever in the flow it’s sent. Today that works best through an AI agent or an automated test. By hand, Proxy Mail QA for Chrome fills the first screen, the one with the email field, and you type the later ones. Proxy Mail QA never presses Next or submits, and it doesn’t know what goes in fields only your app has, such as company size or “How did you hear about us?”: your agent or test fills those.

Why multi-page sign-ups break

• The account has to carry over. Screen 2 belongs to the account made on screen 1. A test that uses a new name or address on each screen makes an account no real person would have.
• Later screens ask what only your app asks. Typing the same answers every run is slow, and every tester picks different ones, so results can’t be compared.
• Some screens come after the account exists. Onboarding questions often appear after the verification email, so the test has to cover the email and the screens around it.
• People leave halfway. They press Back, refresh, close the tab and come back tomorrow.
• The screens change. A question moves from screen 3 to screen 2, and a test that lists each screen’s fields goes stale.

What to check

1. Every screen belongs to the same account: the name on the last screen matches the first.
2. A required question on a later screen can’t be skipped, and the page says why.
3. Back keeps what was typed, and Next after Back doesn’t make a second account.
4. Refreshing a later screen, or leaving and coming back, either picks up where the person was or starts again cleanly. A half-made account mustn’t block the email address from signing up again.
5. The step indicator (“Step 2 of 3”) is right, and you can’t skip ahead by typing a later screen’s URL.
6. The verification email arrives once, whichever screen sends it.
7. Someone who verified but didn’t finish can sign in and is taken back to the unfinished screen.
8. Answers from later screens are kept: they show on the account, or in the welcome email that uses them.

With an AI agent

form_values answers one screen at a time. On the first screen it makes a new test address and returns values for the email, names, username, password, date of birth and country. On each later screen, the agent sends that screen’s fields with the same address, so the account carries over. Fields it doesn’t recognise come back empty with a note, and the agent fills those itself.

With Proxy Mail QA connected 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.

Paste the eight checks above under the prompt. Giving the answers for your own fields in the prompt keeps them the same on every run.

In a Playwright test

With the proxymail-qa npm package, call formValues on each screen and pass the first screen’s address to the rest:

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

The same account gets the same name and date of birth on every screen, so a failure on screen 2 is about your app, not the test data.

By hand, with Proxy Mail QA for Chrome

In the version in the Chrome Web Store today (0.8.0):

1. Turn the extension on for your site, and on the first screen click the Proxy Mail QA button in the email field. It fills the email, names, username, date of birth and password there.
2. Later screens have no email field, so they don’t get the button that fills the test account. Type them, copying the test account’s name, username or date of birth from its address in the app, where each has a Copy button.
3. When the verification email arrives, its code or link shows in the page, with Fill or Open, as on a one-screen form.

What Proxy Mail QA doesn’t do here

• Press Next or submit. You, your agent or your test decide what’s tested on each screen.
• Fill your own fields, today. Company size, plan and similar questions are filled by the agent or the test, or typed by hand.
• SMS or phone verification on a later screen: it receives email only. Use your SMS provider’s test numbers.
• A payment screen. Use your payment provider’s test mode and test cards. Proxy Mail QA never fills card fields.

For the first screen on its own, see Review a simple sign-up form.