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