国際住所フォームをテストする方法: 国別切り替えからエラー回復まで

レイヤ 1: 国切り替え状態

国を選択すると、都市のラベルを変更したり、州を州または県に変更したり、地域を非表示にしたり、郵便番号のヒントを置き換えたりすることができます。 UI と API が同じ国の構成から派生していることをアサートします。

国の変更時に入力したテキストを黙って消去しないでください。最初に確認するか、国ごとのドラフトを保持してから、その動作を回帰テストに固定します。

レイヤー 2: セマンティック HTML と自動入力

名前、ラベル、およびオートコンプリートには個別のジョブがあります。ラベルは地域の意味を説明します。名前は API コントラクトに従います。オートコンプリートは、国、address-line1、address-level1、address-level2、postal-code などの標準化されたトークンを使用します。

同じ住所表現に番地を address-line1 および address-line2 と組み合わせないでください。

<input name="addressLine1" autocomplete="shipping address-line1" />
<input name="locality" autocomplete="shipping address-level2" />
<input name="region" autocomplete="shipping address-level1" />
<input name="postalCode" autocomplete="shipping postal-code" />

レイヤー3：バリデーション、正規化、照合

検証では、入力形状が受け入れられるかどうかが尋ねられます。正規化により、大文字と小文字と区切り文字が標準化されます。検証は参照データと比較します。個別の状態とメッセージを与えます。

キーストロークごとに書き換えないようにしてください。ブラーを正規化するか、送信して結果の変更を表示します。

• 空、長すぎる、無効な文字のエラーを区別する
• 正規化前に rawValue を保持する
• ルックアップタイムアウト後にフォームをクリアしない
• 正規表現の一致を成果物としてラベル付けしないでください

第 4 層: エラー回復とアクセシビリティ

失敗後は、エラーの概要または最初の無効なフィールドに注目します。メッセージを aria-describedby に接続し、色だけに依存せず、他のフィールド値を保持します。

キーボード テストの国選択、提案リスト、エラー リンク、および送信後のフォーカス。国固有のプレースホルダではなく、ラベルまたは役割によって自動テストを見つけます。

レイヤ 5: 実際の API ペイロードをアサートします

送信されたリクエストをキャプチャし、countryCode、regionCode、postalCode、rawAddress、および normalizedAddress をアサートします。レコードを再度読み取り、エンコードと null 変換の失敗を検出します。

UI のみのアサーションでは、Ontario が正しく表示されていても、ON ではなく Ontario を送信する州の選択が欠落する可能性があります。また、クリアされた 2 行目を見逃して、前の値がストレージに残る可能性もあります。 1 つのレコードを作成、編集、再度開いて、エクスポートするまで実行することで、テストは 1 つの成功した画面状態ではなく、完全なラウンド トリップであることを証明します。

遅い応答、レート制限、サーバー エラー、提案なし、およびいくつかのもっともらしい提案を伴うサードパーティの検索動作を実行します。アドレスが間違っているため、ネットワーク障害を言葉にしてはいけません。システムが利用できないことと受け入れられない入力は異なる状態であり、対処法も異なります。

テストで使用される国の構成のバージョンを指定します。郵便規則や製品要件が変更された場合、アプリケーションが変更されたのか、参照スナップショットが変更されたのかを障害によって識別する必要があります。

• 最終リクエスト JSON のスナップショットを取得します
• オプションのフィールドをクリアすると古い値が削除されることを確認します
• シミュレーションタイムアウト、429、500、結果なし、および複数の結果
• input-error コピーからシステム エラー コピーを分離する