モバイルウェブテストのテスト戦略が決まったら、mablデスクトップアプリを使用してChromeブラウザによってシミュレートされたモバイルデバイスでテスト作成できます。つまり、iPhoneなどの特定モバイルデバイスにおけるUXを検証するためのテストが、作成可能になります。さらに、一つのテストを、デバイスを縦や横に設定した状態や、異なる画面解像度といったさまざまなパターンで実行できるようになります。
mabl ブラウザ テストをトレーニングするときにエミュレートするモバイル デバイスを選択します。
シミュレートされたモバイルデバイスの設定を使ってテストを新規作成できます。すでにテストがある場合は、既存テストの設定を更新すればOKです。新しいテストを作成する場合は、以下のような手順を踏みます。
- 新しいブラウザーテストを作成します ([New test] > [Browser test])。
- テスト名を指定します。
- [Core settings] セクションで、[MOBILE WEB] タブをクリックします。
- テストに関連付けるアプリケーション、プラン、またはアプリケーションのURLを選択します。
- [Mobile web viewport] セクションで、デバイスと方向を選択します。
- [Create test] ボタンをクリックし、指定したデバイス設定に基づいてエミュレートされたChromeブラウザーエクスペリエンスを用いたトレーニングセッションを開始します。
- テストケースに必要なステップ (クリックやアサーションなど) を追加します。
- テストの変更内容を保存します。
画面解像度の要件
モバイルテストのトレーニングを行う際には、画面解像度をデバイスの高さよりも120px以上大きくします。たとえば、iPhone 13 Pro Max [926x428]
をテストする場合は、画面解像度の長辺を1046px (926px +120px) 以上にする必要があります。
注意点
メニューナビゲーションやホバーアクションは、PCのウェブ画面とモバイルのウェブ画面の両方でテストするときに注意が必要です。特定のデバイスのハンバーガーメニューではナビゲーションが折りたたまれている可能性があります。また、iPhoneなどのタッチ入力デバイスでは、ホバーアクションが存在しません。
テストデバイス設定の更新
すでに作成されたテストのステップを編集する場合、mablはテスト作成時(トレーニングセッション時)に利用されたデバイス設定を利用しようとします。つまり、PCのウェブ画面でテスト作成してたならPCの画面設定になり、モバイルウェブテストであれば、モバイルのウェブ画面設定に自動的になります。デバイス設定は以下の手順で変更できます。
- テストの詳細ページに移動します
- 編集ボタン(ペンのアイコン)をクリックし、テストの修正画面を開きます
- Device部分を変更します
- 変更を保存します
テストのデフォルトデバイス設定を更新する