mablでモバイルWebテストを実装する #mabljapan

mablでは画面サイズを「viewport」で指定できるため、レスポンシブウェブサイトだとこれだけでモバイルブラウザの環境に近づけます。これ以外にも、HTTPヘッダにユーザエージェントを設定したりも可能です。

Creating mobile web tests (responsive)

どの解像度を使うかは、テスト対象のアプリケーションに依存します。たとえばGoogle analyticsなどで、ユーザの解像度情報を調べ、アクセス数の多い解像度を使うのも手です。

デバイスについても同様に調査し、人気のデバイスがわかれば、「人気の解像度 + 人気のデバイス」が特定できます。

テストを作成するときは、Chromeの開発ツールを開き、デバイスモードを指定すれば、擬似的かモバイル環境のビューになります。

mablだとテストを作成すると、現在のviewportを自動的に取得して設定してくれます。レスポンシブサイトであれば、その幅をモバイルブラウザの幅にするだけでOKです。

ちなみに、viewportは幅だけを指定するのがおすすめだそうです。縦に長いページの場合に、下部の要素にアクセスしやすくなりますからね。ただし、画面キャプチャも長くなるのでみやすさで言うなら縦幅も指定したほうがいいかも。

User Agent Stringsを参考に、Planの設定からUser-Agentヘッダを付けてあげれば、カスタムヘッダをアプリに送れます。

さきほどのChrome開発ツールを使ってユーザエージェントを取得することもできます。デバイスモードを指定し、コンソールに「navigator.userAgent」と打ち込めば、指定したデバイスのユーザエージェントが確認できます。

参考: Creating mobile web tests (responsive)