アプリケーションのレスポンシブウェブデザインをテストすることは、ユーザーがモバイルデバイスでも一貫して優れたユーザーエクスペリエンスを得られることを確認するために重要です。mabl では、複数のデバイスや画面の向きでウェブアプリケーションを検証するために、モバイルウェブテストをトレーニングして実行できます。
この記事では、モバイルウェブアプリケーションのテストに関するガイドラインをいくつかご紹介します。
Chromeでテストを実行中にエミュレートするモバイルデバイスを選択する
モバイルウェブテストとモバイルテストの違い
この記事では、モバイルウェブテストの戦略について説明します。モバイルウェブテストは、モバイルエミュレーションを行うChromeブラウザ内で、レスポンシブなウェブアプリケーションとやり取りするブラウザテストの一種です。これらは、モバイル固有のアクションを使ってネイティブのAndroidまたはiOSアプリケーションとやり取りするモバイルテストとは異なります。
使用パターンを分析する
モバイルウェブのテスト戦略を立てるときは、実際の利用パターンから得られるデータを分析することから始めるのが最適です。たとえば、Google Analytics 4（GA4）では、Reportsセクション内でそのようなデータを確認できます。
User > Tech > Overviewレポートに移動して、ユーザーのデバイスごとの内訳や、最も一般的な画面解像度を確認しましょう。
GA4でデバイス使用状況を確認する
分析できるデータがない場合
既存のプロダクトであれば、プロダクトを管理する部門や、マーケティングチームに相談して、モバイルデバイスからのアクセスデータをCSVやPDFでもらえないか確認しましょう。新しいプロジェクトを開始する場合であれば、そもそも分析するデータがないため、最も人気のあるモバイルデバイスの画面解像度を検索して活用できます。
デバイス間でテストを行うための戦略を選択してください
テストしたい画面解像度を決めたら、チームメンバーと連携して、アプリケーションをさまざまなデバイスでテストするための戦略を立てましょう。アプリケーションのレスポンシブデザインの仕組みに応じて、次のいずれかの戦略を選べます。
同じテストをデスクトップとモバイルデバイスの両方で実行できます。
デスクトップとモバイルの違いがわずかな場合は、すべてのデバイスタイプで実行されるテストをトレーニングし、条件付きロジックを使って違いに対応できます。
たとえば、アプリケーションでメインナビゲーションだけが変更される場合、その変更に対応するために、同じテスト内で条件付きロジックを維持した方が、モバイルウェブブラウザで実行中に管理しやすいかもしれません。
デスクトップとモバイルデバイス用に別々のテストを作成する
アプリケーションのデスクトップ版とモバイル版でレイアウト、機能、またはユーザーエクスペリエンスが大きく異なる場合は、デスクトップ用とモバイル用に別々のテストを作成する方が簡単かもしれません。
たとえば、アプリケーションがモバイルとデスクトップでまったく異なる製品のフィルタリングや並べ替えインターフェースを持っている場合や、一部の機能が小さい画面では省略または簡略化されている場合、同じテスト内ですべてのモバイルとデスクトップのシナリオをカバーするには多くの条件分岐ロジックが必要になります。このような場合は、デスクトップ用とモバイル用に別々のテストを作成・管理する方が理にかなっています。