複数ページのサインアップフォームをレビューする

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.

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