モバイルウェブテストのトラブルシューティング

シミュレートされたモバイルデバイス設定で失敗したテストを再現させる場合は、テストの詳細ページに移動し、上部の編集アイコン(鉛筆のアイコン)からテストの編集画面を開き、デフォルトのデバイス設定を、目的の設定に一時的に変更して、トラブルシューティング用に対応できます。次に、Edit stepをクリックし、mablトレーナーを起動して、トラブルシュート用に設定したデバイス設定を使い、テストのステップをひとつずつ再生できます。

シミュレートされたモバイルデバイス設定で失敗したテストを再現させる場合は、テストの詳細ページに移動し、上部の編集アイコン(鉛筆のアイコン)からテストの編集画面を開き、デフォルトのデバイス設定を、目的の設定に一時的に変更して、トラブルシューティング用に対応できます。次に、Edit stepをクリックし、mablトレーナーを起動して、トラブルシュート用に設定したデバイス設定を使い、テストのステップをひとつずつ再生できます。

現在のビューポートでは非表示でありながら、ページのDOM上に存在している要素をクリックしてしまったときに、場合によってはテストが成功してしまう可能性もあります。たとえば、モバイルデバイスではホバーアクションがないため、メニューを完全に開かなくてもメニュー項目をクリックできる場合があるからです。こういった問題に遭遇した場合は、モバイルウェブテスト用にテストを作成し、今後はそのテストをつかって検証するのが最善でしょう。

mablはターゲットとなる要素をクリックするために、様々な方法と試します。それらはステップのログに記録されます。mablはターゲットとなる要素をクリックするために、様々な方法と試します。それらはステップのログに記録されます。

mablはターゲットとなる要素をクリックするために、様々な方法と試します。それらはステップのログに記録されます。

mablはホバーの動きをステップとして取り込めるため、テストに失敗しないで気が付かないケースもあります。ホバー部分のテストには十分注意が必要です。

ユーザーエージェント文字列の設定

mablはビューポートの設定に加えて、ユーザーエージェント文字列をもとに、PCの用Chromeブラウザを使いモバイルデバイスをシミュレートします。ユーザーエージェント文字列は、テスト実行中にHTTPヘッダーに値として渡されます。これらのユーザーエージェント文字列がどのように設定されているかを確認したい場合は、Chromeブラウザの開発者ツールを開き、デバイスツールバーを切り替えて、シミュレートするモバイルデバイスを選択します。次に、以下のようにコンソールパネルを開き、navigator.userAgentと入力すれば、選択したデバイスのユーザエージェント文字列を確認できます。

Chromeブラウザのコンソール画面Chromeブラウザのコンソール画面

Chromeブラウザのコンソール画面

詳細はChromeのドキュメントにも書かれています。あわせてご確認ください。

🚧

モバイルウェブテストでの制限について

現在、以下のような制限がモバイルウェブテストにあります。

  • モバイルウェブテストはChromeのみで動作します
  • Visual Changeが動作しません(Visual Smoke Testを含む)
  • シミュレートされたモバイルテストでのみ実行された場合、テスト詳細ページにスクリーンショットが表示されません
  • モバイルデバイス設定によって作成されたテストは、mablトレーナーを利用してローカルで再生できますが、ローカルでのアドホック実行やCI内での実行はまだサポートされていません

ブラウザのレンダリングエンジンの違いにより、iPhoneなどのiOSベースのデバイスを利用してmablでテスト実行した場合、実際のリアルデバイスでChromeを利用した場合とで、わずかに異なる結果が表示される場合があります。PCやAndroidで使用するBlinkレンダリングエンジンとは異なり、iOSデバイスでのレンダリングエンジンには、AppleのWebKitが使われるからです。


Did this page help you?