Webアプリケーションのテスト作成・実行

Magic Podの使い方 > Webアプリケーションのテスト作成・実行

このページでは、Webアプリケーションのテストを作成・実行する手順を説明します。

目次

手順を動画で見る

ごく簡単なテスト作成・実行の手順が分かる動画を用意しています。


動画にもあるとおり、Magic Podでは1つのブラウザで作成したテストケースを別のブラウザで実行することもできます。ブラウザによってHTMLの構成が異なっていたり、画面の見た目が大きく異なる場合にはテストが失敗することもあります。

4. 実践ガイド

以下では動画内の手順について説明します。

テストケースの作成

図1「テストケースを編集」ボタン

まずテストケースを作成し、図1の「テストケースを編集」のボタンをクリックして図2の「テストケース」編集ページに移動しましょう。このページで、テストケースの中身を具体的に作成していきます。

図2「テストケース」編集ページ

ブラウザの指定

最初にブラウザを起動して画面キャプチャなどの情報を取得します。そのためには、図3のポップアップでブラウザを指定し、接続する必要があります。

図3 ブラウザの指定

ここではGoogle Chromeを使って作成を進めていきます。

画面キャプチャの取得

ブラウザを指定したら、テストケース編集ページ右上にある、ブラウザとの「接続」ボタン(図4)をクリックします。

図4 ブラウザとの「接続」ボタン

初めてブラウザと接続する際には図5のようなダイアログが表示されるので、接続先のURLを入力します。ここで入力したURLはプロジェクトごとに記憶され、2つめ以降のテストケースでも同じURLが開きます。

図5 URLの入力

OKボタンをクリックすると、Windowsの場合は図6-1のような確認ダイアログが表示されるので、「このタイプのリンクは常に関連付けられたアプリで開く」にチェックを入れて「MagicPodDesktopを開く」を選びます。チェックを入れておくと、次回からは確認ダイアログが表示されなくなります。

図6-1 確認ダイアログ (Windowsの場合)

Macの場合は以下のようなダイアログが表示されます。同様に「開く」を選びます。

ブラウザの確認ダイアログ

図6-2 確認ダイアログ (Macの場合)

すると、図7のようにMagic Pod Desktopが起動するので、初回はメールアドレスとパスワードを入力して「Authenticate」をクリックします。

Magic Pod Desktop

図7 Magic Pod Desktop

その後しばらく待つと、Magic Pod Desktopによって、テストケースの編集ページとは別のウィンドウでChromeが起動され、先程入力したURLへ遷移します(図8)。

図8 ブラウザ上で初期ページが表示された様子

ブラウザが起動すると、図9のように接続ボタンのステータスが青色になります。

図9 接続完了時のステータス表示

こうして接続が完了したら、「デスクトップアプリでUIをキャプチャ」ボタンが押せるようになるので、これを押して画面キャプチャを取得します。ボタンを押すとキャプチャのアップロードとスキャンが開始され、しばらく待つと図10のようにテストケース編集ページに表示されます。

図10 テストケース編集ページに表示された画面キャプチャ

これで画面キャプチャが取得できました。1画面左側には、今キャプチャを取得したページへ遷移するためのコマンドが自動生成されています。このコマンドは後から追加・修正・削除することも可能です。

テスト手順の作成

キャプチャが1枚アップロードできたので、これを使って1画面だけの簡単なテストを作成してみましょう。

テスト手順の作成の方法は、手順の種類によって2通りに分かれます。

画面上の要素(ボタン、テキストフィールドなど)を使った手順を追加するには、キャプチャ上から操作したい要素をドラッグ&ドロップします。行が追加されたらクリックやテキスト入力などのコマンドを選び、必要に応じて値を入力します。

図11 ドラッグ&ドロップでテスト手順を作成している様子

特定の要素と関連しないコマンドを追加するときは、「行追加」ボタンでコマンドの一覧を表示させ、必要なコマンドを選択します。ここでは検索を実行するためにEnterキーを押下するコマンドを挿入します。

図12 キーボードキー入力のコマンドを選択

これで、このケースは完成となります。

図13 完成したテストケース

また、要素の名前はAIによって自動生成されますが、生成された名前が不適当な場合は、画面キャプチャ上で領域をクリックすると名前を変更できます(図14)。

図14 要素名の変更

なお、Magic Podは要素名に加えて要素のシステム情報も保持しており、テスト実行時にはシステム情報を使って要素を特定します。詳しい仕組みを知りたい方は、こちらを参照してください(モバイルのテスト向けの説明ですが、原理はWebアプリケーションでも同様です)。

テストケースの実行

テスト手順が作成できたら、テストケース編集ページ下部の「実行」ボタン(図15)を押してテストを実行します。

図15 「実行」ボタン

図16のように、ブラウザが自動操作されていくのがわかります。テストの実行ログは、1ステップごとにMagic Pod Desktop上にリアルタイムで表示されていきます。

図16 テスト実行の様子

テストが成功すると、図17のように実行ボタンの表示が「成功」となります。

図17 テスト成功の様子

ここで、テストケース編集ページで「戻る」リンクをクリックし、テストケースのページで「実行ログ」タブを選ぶと、テストの実行履歴(図18)や、さらにテスト結果詳細ページ(図19〜)で、テストの実行ログや画面キャプチャ、テスト実行時の情報(使用したブラウザなど)も確認できます。

図18 テストの実行履歴ページ

図19 テスト結果詳細ページ(実行ログタブ)

図20 テスト結果詳細ページ(画面キャプチャ一覧タブ)

図21 テスト結果詳細ページ(実行情報タブ)

  1. 厳密には、画面キャプチャに加え、WebページのHTML情報もアップロードされています。 []