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

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つのコマンドは必要ありません。

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

準備

「クリックしてファイルアップロード」コマンドを使うと、予めMagic Podに登録しておいたファイルをファイルアップロードのテストに使うことができます。コマンドを選択して「ファイルを選択」ボタンをクリックするとファイル選択・登録用のダイアログが表示されるので、必要に応じて「新しいファイルを追加」ボタンからファイルを登録してください。

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

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

前述の「クリックしてファイルアップロード」コマンドのUI要素にこの要素を選択し、アップロードしたいファイルを選択するとファイルアップロードができるようになります。

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

多くのサイトでは、上記のブラウザ標準のボタンではなく専用にデザインされたファイル選択ボタンが実装されています。たとえば、Magic Podでもまさに前述のファイル選択・登録ダイアログで独自のファイル選択ボタンが使われています。

この場合はボタンそのものの操作はできないため、ファイルアップロードエリアに対応する、type属性がfileのinput要素に対してコマンドを実行します。

基本的には「ブラウザ標準のファイルアップロードボタンの場合」と同じようにボタン要素(上の図では「選択」ボタン)を指定すれば、Magic Podが自動的に必要なinput要素を探し出します。ただし、WebサイトのHTMLの構造によっては自動的な決定が難しい場合もあります。以下のようなメッセージが表示された場合には、メッセージに表示された候補を確認の上手動でロケータを設定してください。

独自のロケータを定義するのガイドに従って、ファイル選択ボタンのロケータを追加します。入力する内容は、上の段(キー)がエラーメッセージのkey、下の段(値)がエラーメッセージのvalueとなります。2つめのメッセージが表示されていてどちらが正しい要素か分からない場合、もしくは候補が表示されなかった場合は、開発チームへ確認するなどして正しい要素を探してください。

別タブ・別ウィンドウのテスト

テスト実行中にテスト対象のページが新しいタブやウィンドウで開かれる場合は、次の手順で操作できます。各コマンドの使い方についてはこちらも参考にしてください。

  • リンクのクリック操作などによって新しいタブやウィンドウが開かれた場合は、クリックの後に「新しいウィンドウを選択」コマンドを実行します。これで、操作する対象のタブ・ウィンドウが切り替わり、新しいタブ・ウィンドウ上の要素を操作可能になります。
  • 「前のウィンドウを選択」コマンドを実行すると、「新しいウィンドウを選択」コマンドを呼ぶ1つ前のウィンドウに操作対象を戻すことができます。
  • 「ウィンドウを閉じる」を選ぶと、現在のタブ・ウィンドウを「×」ボタンで閉じます。閉じた後に他のウィンドウを操作するには、「前のウィンドウを選択」コマンドを呼んで操作対象を再び切り替える必要があります。

Magic Podのクラウドを使ったテストとコマンドライン一括テスト実行

Magic Podが提供するクラウド環境を使い、簡単に一括テスト実行が可能です。

  • 「画面キャプチャ範囲」には「HTML」しか指定できません。

コマンドラインからの一括実行については、こちらの手順を参考にしてください。

外部のクラウドサービスを使ったテストとコマンドライン一括テスト実行

BrowserStackもしくはSauceLabs上で一括テスト実行が可能です。設定方法は、以下のページを参照してください。コマンドラインからの一括実行の方法も記載されています。

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

  • 「画面キャプチャ範囲」に指定できるのは「HTML」のみです。「ウィンドウ」は指定できません。
  • 「クリックしてダウンロード」「ダウンロードされたことをチェック」コマンドには対応していません。

ローカルPCを使ったコマンドライン一括テスト実行(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に保存しておく必要があります。

ローカル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マシンの「~/」以下にコピーします。

もしくは、以下のコマンドを実行して{"token":"****"}という形式のトークン情報を取得し、****の部分の内容をファイル「~/.magic_pod_token」に保存することでも、認証情報を設定可能です。

なお、「~/.magic_pod_token」のパスはmagic_pod_config.jsonauthTokenFilePathで変更することも可能です。

Xvfbの起動

テストを実行する前にxvfbを起動し、終わったら終了しておく必要があります。CircleCIなど一部のクラウドCIサービスではこの処理は自動的に行われるので不要です。Jenkinsを使っている場合は、Xvfbプラグインを使うとジョブ実行時に自動的にXvfbが起動します。それ以外の場合は、テスト実行時のコマンドを変えることでXvfbとテストを一緒に起動できます(後述)。

テストを実行

準備ができたら、以下のコマンドでテストを実行できます。こちらはCircleCIやJenkins等で既にXvfbが起動している場合のコマンドです。

Xvfbとテストを一緒に起動する場合のコマンドは以下のようになります。

いずれの場合も、magic-pod-command-lineにパスを通すか実行時にフルパスもしくはmagic-pod-command-lineへの相対パスを指定する必要があります。

ローカルPCを使ったコマンドライン一括テスト実行(Mac)

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

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

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

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サイトで作成したテストケースをモバイルエミュレーションモードで実行したり、その逆を行うこともできます。テストケースをどちらのモードで作成したかに関わらず、実行時に選択したほうのモードでテストが行われます。

クライアント証明書の利用

Magic Podのブラウザテストでは、テスト対象のサイトに接続するためにクライアント証明書が必要な場合、予め設定した内容に従ってクライアント証明書を自動的に選択することができます。

サポート対象

実行環境

現在は、クラウド環境のChromeのみに対応しています。

  • ローカルPC(Mac)のChromeについては後日対応予定です。
  • 外部クラウドサービス(SauceLabs、BrowserStack)については対応予定はありません。
  • その他のローカルPC環境(Windows PCのChrome、あるいは他のブラウザ)については現状対応予定はありませんが、必要な場合はサポートへご相談ください。対応可否を検討いたします。

証明書ファイルの種類

PKCS #12タイプ(拡張子が.pfxまたは.p12のもの)のみ対応しています。

参考:証明書のファイル形式について

設定方法(クラウド)

プロジェクトのテスト一括実行画面で、一括実行の設定を開きます。環境の項目で「クラウド」を選択し、詳細タブを開くとクライアント証明書の設定欄が表示されています。

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.11.47-1024x606.png
画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.25.13-1024x594.png

クラウド環境の場合は、テストに使う証明書をMagic Podのサーバにアップロードする必要があります。

「証明書の管理」ボタンをクリックすると登録用のダイアログが表示されるので、「新しいファイルを追加」ボタンからファイルを登録します。

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.13.55-1024x810.png

ファイルを選択した後、証明書ファイルのパスワードを入力します。このパスワードは、クラウド上のテスト実行マシンに証明書をインストールするために必要になります。

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.14.33-1024x879.png

登録が完了したら、閉じるボタンで一括実行の設定画面に戻ります。

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.14.50-1024x896.png

ダイアログを閉じると、証明書を選択するプルダウンで今登録した証明書が選べるようになっているので選択します。また、「URLパターンを入力」と書かれている欄にこの証明書を使いたいサイトのURLの一部を入力します。

画像に alt 属性が指定されていません。ファイル名: スクリーンショット-2020-12-25-午前10.15.58-1024x193.png

URLのパターンは部分一致になりますので、たとえば「https://test.example.com/login」のようなURLにアクセスする場合にも上図の指定でOKです。

これで設定は完了です。この状態でテストを実行すると、実行時に自動的にクライアント証明書が選択されます。

設定方法(ローカルPC)

ローカルPCのテストでクライアント証明書を使用する場合には、予めPCに証明書をインストールしておいてください。

プロジェクトのテスト一括実行画面で、一括実行の設定を開きます。環境の項目で「ローカルPC」を選択し、詳細タブを開くとクライアント証明書の設定欄が表示されています。

クラウドの場合と違い証明書をサーバに保存する必要はありませんが、代わりに証明書の「発行者名」を入力する必要があります。発行者名が分からない場合は、以下の手順で調べることができます。(2度目以降の使用等で既に発行者名が分かっている場合には次のステップは飛ばして大丈夫です)

「発行者名」ボタンをクリックすると以下のようなダイアログが表示されるので、指示に従って証明書のファイルをアップロードしパスワードを入力します。ここで入力するパスワードはローカルPCに証明書をインストールしたときのパスワードと同じものです。証明書を解析して発行者名を取得するために必要となります。証明書自体は一度サーバにアップロードされて解析されますが、その後は不要なのでサーバに保存はされません。

解析が完了すると以下のようなメッセージが表示されます。

解析した発行者名がクリップボードに保存されているので、「発行者名を入力」という欄に貼り付けて入力します。また、「URLパターンを入力」と書かれている欄にこの証明書を使いたいサイトのURLの一部を入力します。

URLのパターンは部分一致になりますので、たとえば「https://test.example.com/login」のようなURLにアクセスする場合にも上図の指定でOKです。

これで設定は完了です。この状態でテストを実行すると、実行時に自動的にクライアント証明書が選択されます。

  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 []