シンプルなサインアップフォームを確認する:メール、パスワード、完了

シンプルなフォームは問題が起きる箇所が少ないですが、その箇所はすべてのユーザーが通る場所です。12 項目のチェックでそれをカバーします。

更新日：2026年11月5日

最初に私たちのおすすめを。 Proxy Mail QA は私たちの製品なので、中立ではありません。短いサインアップフォーム(メール、パスワード、場合によっては名前)について、私たちがおすすめする用途は1つです。Proxy Mail QA for Chrome を使った手動確認、AI エージェント経由、自動テストのいずれでも、試行ごとの新しいテスト用アドレスと、その後に届く確認メールです。以下のチェックリストの大半は製品を必要としません。Proxy Mail QA はレイアウトや文言を確認せず、エージェントやテストの代わりにフォームを入力・送信することもありません。それらは各自が行います。

チェックリスト

メールフィールド

autocomplete="email" の付いた type="email" であること。これにより、スマートフォンでは @ キーボードが表示され、ブラウザは適切なアドレスを候補に出します。
有効だが珍しいアドレスを受け付けること:大文字、プラスタグ(jane+acme@mailclub.dev)、アポストロフィ(o'brien@mailclub.dev)。@ がないもの、2つあるものは拒否すること。
登録済みのアドレスには適切な応答を返すこと:サインインへのリンク付きの「すでにアカウントがあります」か、誰がアカウントを持っているかを明かしたくない場合はどちらでも「メールを確認してください」。

パスワードフィールド

入力前にルールが表示され、そのルールがサーバーで適用されるものと同じであること。
autocomplete="new-password" の付いた type="password" であり、貼り付けができ、入力内容を表示する手段があること。
短すぎるパスワードには、フィールドにルールを示すエラーが出ること。(出ない場合は、登録フォームにパスワードのエラーが表示されないのはなぜ?をご覧ください。)
64文字の長いパスワードが受け付けられ、その後サインインできること。

送信

ボタンを2回押しても、1回のクリックで作成されるアカウントは1つ、送信されるメールは1通であること。
ボタンが処理中であることを示し、サーバーからのエラーが消えずにページに表示されること。

メール

1分以内に届くこと。
リンクが localhost や本番環境ではなくテスト中のサイトに向かい、記載された有効期限が正しいこと。
コードまたはリンクでサインアップが完了し、1回しか使えないこと。

手動で、約10分

Proxy Mail QA for Chrome をインストールし、サインアップページを開いて、ポップアップで Turn on for this site を選びます。
メールフィールドの Proxy Mail QA ボタンをクリックすると、新しいテストアカウントでフォームが入力されます:メール、名前(ある場合)、フィールドのルールに合ったパスワードです。
チェック6と7では、パスワードフィールドの鍵ボタンをクリックし、カードの Edge-case password リスト(「Should be accepted」「Should be rejected」)を開いて、いくつか試します。チェック2では、送信前にフィールドのアドレスにプラスタグを追加します。+anything 宛てのメールも同じテスト用受信トレイに届き、ページではなくアプリに表示されます。
送信します。メールが届くと、コードは Fill と Copy とともに、リンクは Open とともにページに表示されます。
アプリでメール全体を一度読みます。localhost へのリンクはアドレスの行で警告表示されます。

AI エージェントで

Proxy Mail QA をエージェントに接続した状態で(Qoder では Marketplace から)、次のように依頼します。

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.

エージェントがチェックリストに沿って報告するよう、上のチェックリストをプロンプトの下に貼り付けてください。

自動テストで

proxymail-qa npm パッケージと Playwright を使うと、チェック8〜12が変更のたびに実行されます。

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 により、フォーム送信前に送られたものは待機中に無視されるため、再試行で古いリンクを拾うことはありません。

対象外のこと

フォームの見た目や読みやすさ。スマートフォンでも、自分の目で確認してください。
アクセシビリティと速度:Lighthouse と axe DevTools を実行し、キーボードだけでフォームを入力してください。
SMS コードとソーシャルサインイン:Proxy Mail QA が受信するのはメールのみです。
サンドボックスモードやテストモードのメールプロバイダーは確認済みのアドレスにしか送信しないため、本番用に設定するまでテスト用受信トレイには何も届きません。

より多くの項目(生年月日、国、2つ目の画面)を求めるフォームについては、複数ページのサインアップフォームを確認するをご覧ください。

次のサインアップテストで試してみてください

無料プラン、クレジットカード不要。アドレスを作成して、コードやリンクが届くのを確かめてください。

無料アカウントを作成アプリを開く