実践的なクロスブラウザテスト・チェックリスト
レイアウトはあるブラウザでは完璧に見えても、別のブラウザでは崩れてしまうことがあります。画面の狭い低価格なAndroidスマートフォンや、ズーム倍率が125%に設定された古いノートPCが、デザインを台無しにしてしまうかもしれません。
テストを「なんとなく最後に行う確認作業」として扱わないでください。具体的なチェックリストとして扱いましょう。
リスクの高い領域に集中しましょう：
- フォームと入力項目
- ナビゲーションメニュー
- レイアウトシフト
- フォントの読み込み
- JavaScriptのインタラクション
すべてのブラウザをテストしようとするのはやめましょう。それは時間の無駄です。代わりに、効率的なマトリックスを活用してください：
- デスクトップでのChromiumブラウザ1つ
- Safari環境1つ
- Firefox環境1つ
- Androidスマートフォン1台
- iPhone1台
テストの内容を、ユーザーが実際に製品をどのように使用するかという点に結びつけてください。ページはどこでも全く同じに見える必要はありません。使いやすく、読みやすく、安定していることが重要です。
チェックリストには以下を含めるべきです：
- ブラウザとOS
- ビューポートの幅
- ズームレベル
- 特定のユーザフロー
リストは短く保ちましょう。テストに半日かかるようでは、チームはそれを飛ばしてしまいます。優れた一通りの確認は、1時間以内で終わるべきです。
まずは構造から始めましょう。ホームページ、コンテンツページ、フォームを確認します。ウィンドウのサイズをデスクトップからモバイルの幅まで縮小し、ズームインしてみてください。以下の問題に注意してください：
- ボタンの不自然な改行
- 見出しの欠け
- 横スクロールの発生
- スティッキーヘッダーによるコンテンツの被り
- 重要なコントロールを隠してしまうモーダル
次に、インタラクションをテストします。ブラウザによってフォームの挙動は異なります。テキスト入力、パスワードマネージャー、デイトピッカー、ファイルアップロードをテストしてください。オートフィルがレイアウトにどのような影響を与えるかも確認しましょう。
タブ、アコーディオン、検索サジェストなどのJavaScriptを多用するコンポーネントをテストします。コンソールにエラーが表示されていなくても、ボタンが機能していないことがあります。
最後に、サイトの負荷テスト（ストレステスト）を行います：
- ネットワーク速度を制限する
- キャッシュを無効にする
- 入力フィールドに非常に長いテキストを使用する
- オーバーフローを確認するために、通常より多くのアイテムを読み込む
最良のチェックリストとは、退屈なものです。それは単純な「合格か不合格か」のリストであるべきです。リリースするたびに必ず使用してください。バグが本番環境に流出してしまった場合は、その特定の失敗事例をチェックリストに追加しましょう。
チェックリストは、チームが忘れてしまったことを思い出させてくれる場合にのみ、役に立ちます。
出典: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a