mablでは、モバイルWebテストを使用して、さまざまなデバイスでWebアプリケーションを検証できます。ネイティブのAndroidまたはiOSアプリケーションと対話するモバイルアプリケーションテストとは異なり、モバイルWebテストはChromeエミュレーションでWebアプリケーションと対話します。この記事では、モバイルWebテストの作成方法について説明します。
開始する前に
モバイルWebテストを作成する前に、使用パターンを分析し、さまざまなデバイスでのテスト戦略を立てることをお勧めします。詳細については、モバイルWebテストのガイドラインをご覧ください。
モバイルウェブテストをトレーニングする
エミュレートされたモバイルデバイス設定で新しいテストをトレーニングするには、次の手順に従ってください:
- 新しいブラウザーテストを作成します ([テスト作成] > [ブラウザテスト])。
- テスト名を指定します。
- コア設定で、モバイルWebタブをクリックします。
- テストに関連付けるアプリケーション、プラン、またはアプリケーションのURLを選択します。
- モバイル・ビューポートで、デバイスと向きを選択します。画面解像度は、デバイスサイズの高さより少なくとも120px大きい必要があります。たとえば、iPhone 13 Pro Max [926x428]をテストする必要がある場合、画面解像度は少なくとも1146pxの高さ(926px + 120px)が必要です。
- [作成] ボタンをクリックし、指定したデバイス設定に基づいてエミュレートされたChromeブラウザーエクスペリエンスを用いたトレーニングセッションを開始します。
- テストケースに必要なステップ (クリックやアサーションなど) を追加します。
- テストの変更内容を保存します。
モバイルウェブテストのトレーニング
その後のトレーニングセッションでは、テスト設定モーダルからビューポートを管理できます：テストを編集 > トレーナーを起動。
後続のトレーニングセッションでデバイス設定を更新する
モバイルエミュレーションについて
モバイルエミュレーションは、Chrome の 2 つの主要な設定に依存しています。ビューポートサイズの設定と、すべてのネットワークリクエストで HTTP ヘッダーとして特定のユーザーエージェント文字列を渡すことです。実行中にアプリケーションが期待どおりにレンダリングされない問題が発生した場合は、User-Agent 文字列を確認して、障害の原因を特定できます。
- Chrome DevTools でデバイスツールバーを切り替え、エミュレートするモバイルデバイスを選択します。
-
Console パネルで、
navigator.userAgentと入力すると、選択したデバイスのユーザーエージェント文字列の値が表示されます。
この正確な文字列値を使用して、アプリケーションのデバイス検出ロジックのトラブルシューティングを行い、mablから正しい入力が送信されていることを確認できます。
制限事項
- モバイルウェブテストは、Chromeエミュレーションでのみサポートされています。その他のブラウザでのモバイルウェブアプリのテストはサポートされていません。
- ホバーステップは、Chrome モバイルエミュレーションではサポートされていません。
- 視覚的テストは、モバイルWebではサポートされていません。
- iOSデバイスでは、AppleがChromeにAppleのWebKitレンダリングエンジンの使用を要求しており、これはChromeがデスクトップやAndroidで使用しているBlinkレンダリングエンジンとは異なります。これらのレンダリングエンジンの違いにより、iPhoneなどのiOSベースのデバイスでChromeエミュレーションを使用してmablテストを実行した場合、実際の物理デバイスでChromeを使用した場合と比較して、まれに若干異なる結果が表示されることがあります。
- テストがエミュレートされたモバイルデバイスでのみ実行された場合、テスト詳細ページには要素のスクリーンショットが表示されません。