このページでは、ローカルPC環境でテストを作成・実行する手順を説明します。
目次
1.手順を動画で見る
一連の手順が分かる動画を用意しています。動画の前半部分では、iOSシミュレータを使ったテストについて説明しています。Androidの説明は、動画の後半にあります。
以下では動画内の手順について説明します。
2.テストケースの作成
図1 「テストケースを編集」ボタン
このページで、テストケースの中身を具体的に作成していきます。
図2 「テストケース」編集ページ
3.OS・アプリの指定
最初にアプリを起動して画面キャプチャなどの情報を取得します。そのためには、テスト実行設定パネルでOSとアプリを指定し、端末に接続する必要があります。
図3 ターゲットOSとアプリの指定
※ここではiOSのテストをシミュレータで行う場合の指定方法について説明します。Androidについては、Android実機 + apkファイルのテスト及びAndroid実機 + インストール済アプリのテストに方法を記載しています。
iOSの場合、以下のように設定します。
- OS: iOS
- アプリ種別: .appファイル
そして「.appファイルのフルパスを入力」の欄に、アプリの実体であるappファイルのフルパスを指定します。
appファイルのフルパスは、appファイルをoption(alt)キーを押しながら右クリックすると、「パス名をコピー」という項目があるので、それをクリックしてコピーができます。
図4 appファイルの「パス名をコピー」
図5 「接続」ボタン
4.画面キャプチャの取得
図6のようなブラウザの確認ダイアログが表示されるので、「MagicPodDesktopを開く」を選びます。
図6 ブラウザの確認ダイアログ
すると、MagicPodDesktopが起動します。
その後しばらく待つと、MagicPodDesktopによって、iOSのシミュレータがPC上で立ち上がり、アプリがインストールされて起動されます。
図7 iOSシミュレータ上でアプリが起動した様子
こうして接続が完了したら、「デスクトップアプリでUIをキャプチャ」ボタンをクリックして画面キャプチャを取得します。
ボタンを押すとキャプチャのアップロードとスキャンが開始され、しばらく待つとテストケース編集ページに表示されます。
画面キャプチャは、テストケース編集ページに直接ドラッグ&ドロップしてアップロードすることもできます。ただしその場合、後述する自動認識した画面項目名を後から編集する機能が利用できないため、現状非推奨です。
図8 テストケース編集ページに表示された画面キャプチャ
これで画面キャプチャが取得できました。
厳密には、画面キャプチャに加え、アプリのUIツリー情報もアップロードされています。
5.テスト手順の作成
キャプチャが1枚アップロードできたので、これを使って1画面だけの簡単なテストを作成してみましょう。キャプチャ上で要素を選んでドラッグ&ドロップしていければ、簡単にテスト手順を作成できます。要素選択モードを使うとクリックでも要素を追加できます。
図9 テスト手順
コマンドの内容は、自由に変更できます。コマンドは様々なものが用意されており、コマンド一覧のページにて詳しい内容を確認できます。
図10 コマンドの切り替え
また、要素の名前はAIによって自動生成されますが、生成された名前が不適当な場合は、画面キャプチャ上で領域をクリックすると名前を変更できます。
図11 要素名の変更
なお、MagicPodは要素名に加えて要素のシステム情報も保持しており、テスト実行時にはシステム情報を使って要素を特定します。
6.テストケースの実行
テスト手順が作成できたら、テストケース編集ページ下部の「実行」ボタンをクリックしてテストを実行します。
図12 「実行」ボタン
図13のように、iOSシミュレータ上でアプリが起動し、自動操作されていくのがわかります。テストの実行ログは、1ステップごとにMagicPodDesktop上にリアルタイムで表示されていきます。
図13 テスト実行の様子
テストが成功すると、図14のように実行ボタンの表示が「成功」となります。
図14 テスト成功の様子
図15 画面キャプチャ
図16 実行ログ
図17 Appiumログ
図18実行情報
7.複数の画面にわたるテスト
複数の画面にわたるテストを作成する場合、各画面ごとに画面キャプチャを取得する必要があります。
例えば、先ほどのiOSテストアプリが図17のような画面構成をしている場合、①メイン画面のキャプチャはすでに取得したので、あとは②登録完了画面と③アラート画面のキャプチャも取得する必要があります。
図19 テストアプリの画面構成
②と③のキャプチャを取得するには、まずアプリを操作して②の画面をiOSシミュレータ上で開き、ブラウザに戻って「UI追加」ボタンをクリックします。
図20 「UI追加」ボタン
すると「デスクトップアプリでUIをキャプチャ」ボタンが再び表示されるので、クリックして②の画面をキャプチャします。
図21 「デスクトップアプリでUIをキャプチャ」ボタン
スキャンを待つ間にさらに他の画面キャプチャを取得できるので、スキャン中にiOSシミュレータの画面を③に切り替え、再びブラウザ上で「UI追加 > 「デスクトップアプリでUIをキャプチャ」をクリックして、③の画面もキャプチャします。
スキャンが完了したら、「UI一覧」ボタンで画面キャプチャを切り替えながら、テストを作成していきます。
図22 「UI一覧」ボタン
このようにして、複数画面のテストも作成できます。
図23作成された複数画面のテスト