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