𝗔 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗮𝗹 𝗖𝗿𝗼𝘀𝘀-𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗖𝗵𝗲𝗰𝗸𝗹𝗶𝘀𝘁

Chromeでは完璧に見えても、低価格のAndroid端末や、ズーム設定が125%の古いノートPCではレイアウトが崩れることがあります。

テストを「漠然とした最終工程」として扱わないでください。「繰り返しの可能なチェックリスト」として扱ってください。

すべてのデバイスとすべてのブラウザをテストするのは時間の無駄です。代わりに、効率的なマトリックス（組み合わせ）が必要です。

以下の必須項目を選びましょう：

  • デスクトップでのChromium系ブラウザ1つ
  • Safari環境1つ
  • Firefox環境1つ
  • Androidスマートフォン1台
  • iPhone1台

テスト内容は、ユーザーが実際に製品をどのように使用するかに関連付けましょう。すべての場所で全く同じ見た目である必要はありません。使いやすく、読みやすく、安定していることが重要です。

チェックリストは短く保ちましょう。実行に半日かかるようでは、チームはそれを飛ばしてしまいます。1時間で終わるスキャンの方が効果的です。

まずは構造から始めます：

  • ホームページ、コンテンツページ、フォームを点検する。
  • ワイドなデスクトップから狭いモバイル幅までリサイズする。
  • ズームインして、ボタンの折り返しや見出しの欠けがないか確認する。
  • 横スクロールの発生や、コンテンツを覆ってしまうスティッキーヘッダーに注意する。

次に、インタラクション（操作性）をテストします：

  • 上から下までスクロールする。
  • メニューを開き、モーダルを起動する。
  • キーボードを使用してページ内をタブ移動する。
  • テキスト入力、日付選択、ファイルアップロードを含むフォームをテストする。
  • オートフィルによってレイアウトが崩れないか確認する。

JavaScriptコンポーネントをテストします：

  • アコーディオン、タブ、検索サジェストを確認する。
  • スクリプトがボタンに正しくアタッチされないといった、タイミングの問題に注意する。
  • ページの再読み込みと、戻るボタンの挙動をテストする。

最後に、限界まで負荷をかけます（ストレステスト）：

  • ネットワーク速度を制限（スロットリング）する。
  • キャッシュを無効にする。
  • 入力フィールドに長い文字列を使用する。
  • 大きなテーブルや大量のカードがレイアウトにどう影響するかを確認する。

最良のチェックリストとは、退屈なものです。単純な「合格/不合格」のボックスで、リリースプロセスに組み込めるものであるべきです。

バグが本番環境に流出してしまったら、その都度リストに追加してください。チェックリストの価値は、チームが忘れてしまったことを思い出させてくれるときに生まれます。

Source: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a