あなたのアプリケーションがレスポンシブルウェブデザインをサポートしている場合、ユーザがウェブやモバイルデバイスなどを通して、さまざまな画面サイズに合わせて適切なビューが提供されます。この部分をテストするのはとても重要です。mablを利用すれば、Chromeブラウザのデバイスモードを活用し、様々なモバイルデバイスをシミュレートできます。さらに、画面の向きを縦や横に指定でき、さまざまなパターンに対応した自動テストを簡単に作成できます。

テスト実行時に、選択されたモバイルデバイスをChromeがシミュレートします

モバイルウェブのテスト戦略

モバイルウェブのテスト戦略を考える際に、現状のアクセス数やアクセスに利用されるデバイスなど、実際のデータ分析から考えるのがおすすめです。たとえば、Google Analyticsを使えば、そういったデータをレポートで確認できます。Google Analyticsであれば Mobile -> Overview のレポートに移動し、デスクトップ、モバイル、タブレットなどのユーザが利用するデバイスごとの利用数を確認できます。デバイスレポートでは、特定のデバイスだけに絞った内訳の確認も可能です。また、プライマリディメンションに画面解像度に設定して、最もよく使われているモバイル解像度を取得することもできます。

Google Analyticsを使えばモバイルデバイスのアクセス確認が可能

Google Analyticsの Audience -> Technology -> Browser & OS では、よく使われているブラウザやOS情報が確認できます。画面解像度の上位を表示するには、レポートのプライマリディメンションを「画面解像度」に設定します。

分析できるデータがない場合

既存のプロダクトであれば、プロダクトを管理する部門や、マーケティングチームに相談して、モバイルデバイスからのアクセスデータをCSVやPDFでもらえないか確認しましょう。新しいプロジェクトを開始する場合であれば、そもそも分析するデータがないため、最も人気のあるモバイルデバイスの画面解像度を検索して活用できます。

モバイルウェブテストの実行のために、以下のようなテスト戦略を選択できるはずです。

• デスクトップデバイスとモバイルデバイスを同じテストを利用します。そのために、条件文（ifステップ）や Flows を活用して、テストシナリオの中でデスクトップやモバイルの分岐を行い、ナビゲーションの違いやデバイスごとの違いを吸収します。
• デスクトップデバイスとモバイルデバイスでテストを分けます。共通部分は Flows で共通化し、異なる部分はそれぞれでテストを実装します。

上記のそれぞれのテスト戦略には、メリット・デメリットがあるため、ご自身のアプリケーションに合わせて選択が必要です。たとえば、アプリのメインナビゲーション部分だけが変更された場合、条件分岐部分を一箇所だけメンテナンスするほうが簡単でしょう。一方で、デスクトップならデスクトップ、モバイルならモバイルでテストを作成する場合、条件分岐が必要なくなるため、テストがシンプルになり、メンテナンスコストも下げられる可能性があります。