ブラウザテスト実践ガイド

Magic Podの使い方 > ブラウザテスト実践ガイド

このページでは、ブラウザテスト特有の実践的な利用方法について解説します。モバイルアプリ・ブラウザテスト共通の実践ガイドについてはこちらをご覧ください。

目次

テストの実行環境を切り替える

作成したテストケースを複数の環境(チーム内の検証環境と本番同様のステージング環境など)で切り替えて実行したい場合は、ベースURLという考え方を使います。ここでベースURLとは、「テスト中で使うURLの基底となるURL」といった意味で使っています。例を見てみましょう。

ベースURLを使わない場合は、テスト対象のWebページに遷移する際にURLをすべて入力します。

ベースURLを使わない場合

ベースURLを使う場合は、ブラウザ指定のときに使ったポップアップの「詳細」タブの「ベースURL」欄にURLの共通部分を入力しておきます。そして、テストケースの中には共通部分以外の文字列を入力します。

ベースURLを使わない場合

このようにしておくと、テスト実行前にポップアップ内のベースURLを書き換えるだけで簡単に環境を切り替えることができます。なお、テストケース内のURLは「http」もしくは「https」から始まっていればベースURLを無視するようになっています。テスト中に一部URLは決まったものを使いたい場合は、そのURLだけを頭からすべて入力すればOKです。

一時的に表示される要素のキャプチャを取得する

通常は「デスクトップアプリでUIをキャプチャ」ボタンで画面のキャプチャを取得しますが、マウスオーバーしているときにしか表示されない要素などはこの方法では撮ることができません。そのような要素を撮りたいときは、キャプチャボタンの右側にある小さな下向き三角のボタンをクリックして、「5秒後にキャプチャ」というオプションを有効にします。この状態でキャプチャボタンをクリックすると実際にキャプチャが撮られるまで5秒間の猶予があるので、その間に必要な要素を表示させることができます。

「5秒後にキャプチャ」オプションを有効にしている状態(チェックが入っている)

なお、このオプションはテストケースの編集ページを再読込するか、再度「5秒後にキャプチャ」オプションをクリックしてチェックを外すまで有効になります。

スクロールのある画面のテスト

ブラウザの初期表示に画面がおさまりきらない場合のキャプチャ取得・テストケース作成の方法について説明します。

基本的にWebブラウザのテストでは画面外にあるUI要素でも自動的にスクロールして操作してくれるため、テストケース作成時にはあまり意識する必要がありません。ただ、使用するUI要素や画面のレイアウトによっては調整が必要な場合もあります。

キャプチャの取得

縦に長い画面のキャプチャを一度に取得するには、キャプチャボタンの右側にある小さな下向き三角のボタンをクリックして、「ページ全体をキャプチャ」というオプションを有効にします。この状態でキャプチャボタンをクリックすると、画面全体をスクロールしてキャプチャを取得することができます。

「ページ全体をキャプチャ」オプション

現在、以下の制限事項があります。

  • 画面の横スクロールには対応しておりません。
  • 固定されたヘッダ・フッタを含む画面では、ヘッダ・フッタがキャプチャの途中に何度も挿入される場合があります。
  • スクロールすることによって要素が動的に追加されるタイプの画面では、すべてのキャプチャを取得することはできません。
  • その他、画面のレイアウトによっては画面全体のキャプチャを取得できない場合があります。(ページ全体ではなく一部だけがスクロールする、スクロール時に要素のレイアウトが変動する等)

画面全体をキャプチャしたときに目的のUI要素が取得されない場合は、「ページ全体をキャプチャ」のチェックを外し、手動で目的の要素が見えている状態までスクロールしたあとにキャプチャを取得してください。

テストケースの作成

前述のとおり、一度キャプチャを取得してしまえばスクロールについてはあまり意識する必要はありません。たとえば画面外に出ている要素をクリックする場合も、その要素を対象にして「クリック」コマンドを選ぶと自動的にスクロールしたあとクリックが行われます。

ただし、自動スクロールが行われない場合もあります。

  1. UI要素のロケーターがAIロケーター(ai=XXのような表記)の場合
  2. UI要素が画面の範囲内に存在するが、固定されたヘッダやフッタで隠れている場合
  3. 画面全体ではなく、画面の一部をスクロールしないと対象のUI要素が見えない場合

これらに当てはまる場合は、クリックやテキスト入力の操作を行う前に「表示されるまでページ全体をスクロール」「表示されるまでUI要素をスクロール」のいずれかを使って操作したい要素が見えている状態にします。

以下が実際のコマンドの例です。上の「3. 画面全体ではなく、画面の一部をスクロールしないと対象のUI要素が見えない場合」は「表示されるまでUI要素をスクロール」を選びます。この例では、次に操作するため表示させたい要素が「ホーム(メニュー)」、そのためにスクロールさせたい要素(サイドバーやガジェットなど)が「area(1)」となります。

「表示されるまでスクロール」コマンド

自動スクロールが必要かどうかをテスト実行前に判断するのは難しいので、スクロールコマンドは入れずにテストケースを作成してみて、実行しながら少しずつ調整していくのが良いでしょう。

ファイルダウンロードのテスト

テスト中の操作でファイルダウンロードが発生したときの動きは、ブラウザによって異なります。

  • Chrome, Firefoxの場合
    • ダウンロードの確認ダイアログは表示されず、所定の場所(デフォルトではデスクトップ以下のmagicPod/downloadsフォルダ)にファイルがダウンロードされます。
  • IE11の場合
    • IE11では確認ダイアログを自動で非表示にすることができないため、キーボード操作を使ってChrome, Firefoxの場合と同じフォルダにファイルを保存します。そのため、他のブラウザよりも操作が遅くなります。
    • また、動作としても他のブラウザよりも不安定になりがちなので、特別にIEでダウンロードのテストをしたいというニーズがない限りは別のブラウザでテストをすることをお勧めします。

ダウンロードする操作の指定方法

ChromeもしくはFirefoxでのみテストを行う場合は、ダウンロードする操作について特別なことをする必要はありません。たとえば、何らかのボタンを「クリック」するといった指定をすると自動的にダウンロードが行われます。

一方IEの場合はダウンロードのためのボタンをクリックしただけでは上記のキーボード操作ができないので、特別に「クリックしてファイルダウンロード」というコマンドを使用します。Magic Pod側ではどのボタンがダウンロード処理を発生させるかは分からないため、テストケースを作る側で設定する必要があります。ChromeとFirefoxで「クリックしてファイルダウンロード」コマンドを指定した場合は、「クリック」と同じ動作になりますので、IEとこれらのブラウザで共通したテストケースを使うことができます。

ダウンロード結果の確認

ファイルが問題なくダウンロードされたかどうかは、特定の名前のファイルがダウンロードフォルダの中にあるかどうかで確認します。この確認は「ダウンロードされたことをチェック」コマンドで行ってください。ファイル名には正規表現を使うことができます。

時間のかかるダウンロードの待機

ファイルのダウンロードにある程度(10秒以上)時間がかかりそうな場合は、確認コマンドの前に「ダウンロードが完了するまで待つ」コマンドを挿入します。こちらもファイル名を正規表現ありで指定することができます。10秒以内であれば確認コマンドだけでも待機してくれますので、待機コマンドを入れなくても大丈夫です。

最終的なコマンドは以下のようになります。

ダウンロードのテスト

なお、ダウンロードされたファイルの確認が不要な場合には下の2つのコマンドは必要ありません。

ファイルアップロードのテスト

ブラウザ標準のファイルアップロードボタンの場合

ブラウザ標準のファイルアップロードボタン(ブラウザによりますが、以下のようなデザインをしています。type属性がfileのinput要素です。)の場合、このボタンとその右側のファイルパス名エリアを合わせて1つの要素になっています。

この要素に対して「テキスト入力」コマンドでアップロードしたいファイルのパス(ローカルPCにおけるフルパス)を指定することで、ファイルをアップロードできます。

独自デザインのファイルアップロード要素の場合

この場合は、ファイルアップロードエリアに対応する、type属性がfileのinput要素に対して「テキスト入力」コマンドを実行します。

ただし、多くの場合、このinput要素は非表示になっており、Magic PodでスキャンしたUI上には存在しません。非表示になっている場合も、Chromeであれば以下の方法でファイルアップロードが可能です。

  1. UI上に存在するファイルアップロードエリア付近の適当な要素をクリックして、目的のinput要素に対応するロケータを追加します。
  2. 追加したロケータを使い、input要素に対して「テキスト入力」コマンドでファイルパスをセットします。

コマンドラインからのテスト一括実行(Windows)

プロジェクト内のテストの一括実行は画面からでも行えますが、WindowsのPowerShellからでも行うことができます。

設定ファイルを記述

まずは、テストのコマンドライン実行に必要な設定ファイルの記述を行います。

Magic Pod Desktopを一度でも起動していれば、フォルダ「C:\Users\<ユーザー名>\AppData\Roaming\magic_pod_desktop」に「magic_pod_config.json」というファイルがあるはずなので(これがMagic Pod Desktopが利用している設定ファイルです)、これをデスクトップなど適当な場所にコピーします。

コピーしたら、以下の形式に従い設定ファイルをJSON形式で記述します。

共有変数を指定する場合はこちらを参考にしてください。

以上を踏まえると、設定の記述は、例えば以下のようになります。

  • capabilitiesとtestConditionに似たような内容を書かなければならないのは現状の仕様ですが、今後改善予定です。testConditionはなくてもテスト実行できますが、Web上でテスト結果を閲覧する際にブラウザの情報が抜け落ちてしまいます。

テストを実行

設定ファイルを作成したら、以下の手順でテストを実行します。

  1. Magic Pod Desktopが起動している場合は終了しておきます。
  2. WindowsのPowerShellを開きます。方法はいくつかありますが、スタートメニューの「Windows PowerShell」から開くのが簡単です。
  3. 次のコマンドを実行します。「MagicPodDesktopのバージョン」の部分は、実際に存在するフォルダに応じて(0.36.0など)入力してください。PowerShell上で補完も効きます。先頭の「&」がないとエラーになりますので注意してください(PowerShell上で1から入力している場合には自動的に挿入されます)
    • & "C:\Users\<ユーザ名>\AppData\Local\magic_pod_desktop\app-<Magic Pod Desktopのバージョン>\MagicPodDesktop.exe" run --magic_pod_config="<magic_pod_config.jsonのフルパス>"; Wait-Process -Name MagicPodDesktop -Timeout 1200
  4. magic_pod_config.jsonの設定に従い、テストが実行されます。

magic_pod_config.jsonをコピーすれば、他のWindows PCでも同様にしてコマンドライン実行が可能です。

ただし、認証情報だけはmagic_pod_config.jsonに保存されていないので、一度Magic Pod Desktopを起動してメールアドレスとパスワードを入力し、認証情報をPCに保存しておく必要があります。

コマンドラインからのテスト一括実行(Linux)

Windowsと似たような手順で、Linux上でのテスト一括実行も可能です。

必要なライブラリのインストール

まずは、xvfb(ブラウザの描画を行うために必要なライブラリ)とimagemagick(ブラウザウィンドウ全体のスクリーンショットを取得するのに必要なライブラリ)をインストールします。Ubuntuの場合は、以下のコマンドでインストールできます1

なお、CircleCIなど一部のクラウドCIサービスではxvfbとimagemagickが最初からインストールされているので、この手順は不要です。

次に、Chromeを使ってテストを実行する場合は、Chromeをインストールします。Ubuntuの場合は、以下のコマンドでインストールできます2

次に、日本語の画面キャプチャが文字化けしないように日本語フォントをインストールします。Ubuntuの場合は、以下のコマンドでインストールできます3

magic-pod-command-lineのダウンロード

ダウンロードページからmagic-pod-command-line for Linuxのzipファイルを取得して解凍し、得られたmagic-pod-command-lineとnode_modulesディレクトリを適当な場所に配置します(2つとも同じ場所に配置してください)。

設定ファイルを記述

Windowsの場合と同様の形式で、「magic_pod_config.json」を作成します(コピーできるような元ファイルは無いので、エディタなどで作成してください)。

認証情報を設定

Magic Pod Desktopによるログインが成功したことがあるPCなら、Macならフォルダ「/Users/<ユーザー名>」以下に、Windowsならフォルダ「C:\Users\<ユーザー名>」に「.magic_pod_token」というファイルがあるはずです。このファイルがログインユーザーの認証情報ファイルなので、これをLinuxマシンの「~/」以下にコピーします。

なお、このファイルのパスはmagic_pod_config.jsonauthTokenFilePathで指定することも可能です。

Xvfbの起動

テストを実行する前にxvfbを起動し、終わったら終了しておく必要があります。CircleCIなど一部のクラウドCIサービスではこの処理は自動的に行われるので不要です。Jenkinsを使っている場合は、Xvfbプラグインを使うとジョブ実行時に自動的にXvfbが起動します。それ以外の場合は、こちらのような記事を参考に起動処理を実施してください。

テストを実行

準備ができたら、以下のコマンドでテストを実行できます。

コマンドラインからのテスト一括実行(Mac)

Mac版のMagic Pod Desktopを利用すれば、Windowsと同様の流れでコマンドライン実行が可能です。Windowsと異なるのは以下の部分です。

  • magic_pod_config.json」は、デフォルトではフォルダ「/Users/<ユーザー名>/Library/Application Support/magic_pod_desktop/magic_pod_config.json」にあります。
  • 実行はMacの「コンソール」から行います。
  • 呼び出すコマンドは以下のようになります。

外部のクラウドサービスを使ったテスト

BrowserStackもしくはSauceLabsを利用したテスト実行に対応しています。設定方法は、各サービス向けのドキュメントに記載しています。

実行にあたっては現状以下のような制約があります。改善を希望される場合はお問い合わせください。

  • ファイルアップロード、ダウンロードのテストはサポートしておりません。
  • 「画面キャプチャ範囲」に指定できるのは「HTML」のみです。「ウィンドウ」は指定できません。

旧バージョンのブラウザに対するテスト

Chrome、Edge (Chromium)のバージョンが古いと、バージョンエラーでブラウザがうまく起動できないことがあります。これは、テストに必要な「ChromeDriver」や「Microsoft Edgeドライバー」というライブラリのバージョン不一致エラーによるものです。この問題は以下の手順で解消できます。

  1. ChromeDriverのダウンロードページまたはMicrosoft Edgeドライバーのダウンロードページから、お使いのブラウザのバージョンとOSに対応するChromeDriverまたはMicrosoft Edgeドライバー(Microsoft Edgeレガシではないので注意してください)をダウンロードし、適当な場所に解凍します。
  2. Magic Podの設定ファイル(Windowsであれば「C:\Users\<ユーザー名>\AppData\Roaming\magic_pod_desktop\magic_pod_config.json」、Macであれば「/Users/<ユーザー名>/Library/Application Support/magic_pod_desktop/magic_pod_config.json」)を開き、以下のように記述します。これで、バージョンエラーは解消されるはずです。(Windowsの場合、パス中の「\」「¥」は「\\」「¥¥」と記載する必要があるので注意してください。)

Chromeの場合の設定

Edge (Chromium)の場合の設定

Chromeのモバイルエミュレーション機能を用いたモバイルWebサイトのテスト

Chromeのモバイルエミュレーションの機能を用いて、モバイル向けのWebサイトのテストを擬似的に行うことができます。モバイルエミュレーションではモバイル端末(スマートフォン・タブレット)の画面サイズとユーザーエージェントを設定することでモバイルWebサイトに近い挙動を確認することができます。実機やシミュレータ・エミュレータを起動させる必要がないため、簡単・高速にテストが行えるのがメリットです。

ただし、実際にモバイル端末のOSで動作するわけではないため以下のような細かい動作は再現できません。

  • ブラウザの違いによる細かい動作の差異
    • たとえばiPhoneをエミュレートする場合ユーザーエージェントはSafariのものになりますが、実際にはChrome上で動作しているのでSafari特有の不具合は見つけることができません。
  • OS・ハードウェア起因の動作の差異

モバイルエミュレーションの機能を使うためには、ブラウザ等を選択するパネル上で「端末の種類」から「モバイルエミュレーション(Chrome)」を選択し、続いてOSと機種を選択します。機種は現状Chromeの開発者ツールで提供されているものから抜粋していますが、これ以外に確認したいものがある場合にはMagic Podのサポートまでご連絡ください。

モバイルエミュレーション(Chrome)を選択した状態

この状態でブラウザに接続すると、下の図のようにモバイル向けの表示になった状態でChromeが開きます。あとは、通常デスクトップブラウザの場合と同じように操作してください。

モバイルエミュレーションモードで開いたChrome

サイトのHTMLが共通であれば、デスクトップ向けのWebサイトで作成したテストケースをモバイルエミュレーションモードで実行したり、その逆を行うこともできます。テストケースをどちらのモードで作成したかに関わらず、実行時に選択したほうのモードでテストが行われます。

  1. https://tecadmin.net/setup-selenium-chromedriver-on-ubuntu/ []
  2. https://tecadmin.net/setup-selenium-chromedriver-on-ubuntu/ []
  3. https://qiita.com/takayamag/items/b632524e7994210fd1e8 []