このページでは、ローカルPCでWebアプリケーションのテストを作成・実行する手順を説明します。
目次
1.手順を動画で見る
ごく簡単なテスト作成・実行の手順が分かる動画を用意しています。
動画にもあるとおり、MagicPodでは1つのブラウザで作成したテストケースを別のブラウザで実行することもできます。ブラウザによってHTMLの構成が異なっていたり、画面の見た目が大きく異なる場合にはテストが失敗することもあります。
2.テストケースの作成
図1「テストケースを編集」ボタン
まずテストケースを作成し、図1の「テストケースを編集する」のボタンをクリックして図2の「テストケース」編集ページに移動しましょう。このページで、テストケースの中身を具体的に作成していきます。
図2「テストケース」編集ページ
3.ブラウザの指定
最初にブラウザを起動して画面キャプチャなどの情報を取得します。そのためには、図3のポップアップでブラウザを指定し、接続する必要があります。
図3 ブラウザの指定
ここではGoogle Chromeを使って作成を進めていきます。
4.画面キャプチャの取得
ブラウザを指定したら、テストケース編集ページ右上にある、ブラウザとの「接続」ボタン(図4)をクリックします。
図4 ブラウザとの「接続」ボタン
初めてブラウザと接続する際には図5のようなダイアログが表示されるので、接続先のURLを入力します。ここで入力したURLはプロジェクトごとに記憶され、2つめ以降のテストケースでも同じURLが開きます。
図5 URLの入力
OKボタンをクリックすると、Windowsの場合は図6-1のような確認ダイアログが表示されるので、「このタイプのリンクは常に関連付けられたアプリで開く」にチェックを入れて「MagicPodDesktopを開く」を選びます。チェックを入れておくと、次回からは確認ダイアログが表示されなくなります。
図6-1 確認ダイアログ (Windowsの場合)
Macの場合は以下のようなダイアログが表示されます。同様に「開く」を選びます。
図6-2 確認ダイアログ (Macの場合)
すると、図7のようにMagicPodDesktopが起動するので、初回はメールアドレスとパスワードを入力して「Authenticate」をクリックします。
図7 MagicPodDesktop
その後しばらく待つと、MagicPodDesktopによって、テストケースの編集ページとは別のウィンドウでChromeが起動され、先程入力したURLへ遷移します(図8)。
図8 ブラウザ上で初期ページが表示された様子
こうして接続が完了したら、「デスクトップアプリでUIをキャプチャ」ボタンが押せるようになるので、これを押して画面キャプチャを取得します。ボタンを押すとキャプチャのアップロードとスキャンが開始され、しばらく待つと図10のようにテストケース編集ページに表示されます。
図10 テストケース編集ページに表示された画面キャプチャ
これで画面キャプチャが取得できました。1画面左側には、今キャプチャを取得したページへ遷移するためのコマンドが自動生成されています。このコマンドは後から追加・修正・削除することも可能です。
5.テスト手順の作成
キャプチャが1枚アップロードできたので、これを使って1画面だけの簡単なテストを作成してみましょう。
テスト手順の作成の方法は、手順の種類によって2通りに分かれます。
画面上の要素（ボタン、テキストフィールドなど）を使った手順を追加するには、キャプチャ上から操作したい要素をドラッグ＆ドロップします。行が追加されたらクリックやテキスト入力などのコマンドを選び、必要に応じて値を入力します。
図11 ドラッグ＆ドロップでテスト手順を作成している様子
特定の要素と関連しないコマンドを追加するときは、「行追加」ボタンでコマンドの一覧を表示させ、必要なコマンドを選択します。ここでは検索を実行するためにEnterキーを押下するコマンドを挿入します。
図12 キーボードキー入力のコマンドを選択
これで、このケースは完成となります。
図13 完成したテストケース
また、要素の名前はAIによって自動生成されますが、生成された名前が不適当な場合は、画面キャプチャ上で領域をクリックすると名前を変更できます(図14)。
図14 要素名の変更
なお、MagicPodは要素名に加えて要素のシステム情報も保持しており、テスト実行時にはシステム情報を使って要素を特定します。詳しい仕組みを知りたい方は、こちらを参照してください（モバイルのテスト向けの説明ですが、原理はWebアプリケーションでも同様です）。
6.テストケースの実行
テスト手順が作成できたら、テストケース編集ページ下部の「実行」ボタン(図15)を押してテストを実行します。
図15 「実行」ボタン
図16のように、ブラウザが自動操作されていくのがわかります。テストの実行ログは、1ステップごとにMagicPodDesktop上にリアルタイムで表示されていきます。
図16 テスト実行の様子
テストが成功すると、図17のように実行ボタンの表示が「成功」となります。
図17 テスト成功の様子
ここで、テストケース編集ページで「戻る」リンクをクリックし、テストケースのページで「テスト結果」タブを選ぶと、テストの実行ログ(図18)や、さらにテスト結果詳細ページ(図19〜)で、テストの実行ログや画面キャプチャ、テスト実行時の情報（使用したブラウザなど）も確認できます。
図18 テストの実行履歴ページ
図19 画面キャプチャ
図20 実行ログ
図21 Seleniumログ
図22 実行情報