読み込み中...
投稿日
自動テストツールMagicPodの使い方と導入時の注意点まとめ
もくじ
はじめに
本記事ではMagicPodの簡単な使用方法、実際に使用してみての感想を紹介します。MagicPodを用いることで、プログラミングの知識不要で誰でも簡単かつ効率良くテスト自動化を実現できます。これからMagicPodを使用してみたい方、MagicPodがどういったものか理解したい方の参考になれば幸いです。
MagicPodとは
MagicPodとは、Webアプリ・モバイルアプリのどちらにも対応したノーコードのクラウド型テスト自動化ツールです。テストケース作成時の画面は直感的で、初心者でも簡単に扱うことができるものです。
また、画面の変更にAIが自動で対応し、テストの保守コストを削減できる点も特徴です。
想定読者
- MagicPodの導入を検討している方
- これからMagicPodを使用する予定の方
基本的な使用方法
MagicPodの基本的な使用方法を紹介します。今回はローカル環境で起動したアプリを対象にテストを実行します。なお、テスト対象の画面は実際のプロジェクトで使用しているものではなく、記事執筆用に作成した画面です。
-
MagicPodのセットアップ
- MagicPodアカウントの作成
MagicPodの公式サイト（https://magicpod.com/）にアクセスして、アカウントを作成します。 - MagicPod Desktopのインストール
MagicPod上でテストを作成、実行するためのソフトウェアです。
こちらからインストールできます。
- MagicPodアカウントの作成
-
MagicPod Desktopへの接続
接続のため、画面右上の「接続」の左部分の赤枠で囲んだ箇所を押下します。
環境、端末の種類やブラウザ、詳細設定を選択する画面が表示されます。
環境はローカルPC、端末の種類はデスクトップ、ブラウザはChromeを指定し、接続を押下します。
ここまでの手順でMagicPod Desktopが起動し、MagicPodで起動したブラウザが表示されます。
-
テストケースの作成
- 画面キャプチャの取得
テストケース作成のため、起動したアプリの画面をMagicPod側でキャプチャします。赤枠部分の「デスクトップアプリでUIをキャプチャ」からキャプチャを実施できます。
※MagicPod Desktopで起動した場合、対象画面ごとにキャプチャを取得する必要があります。
- キャプチャ取得後
UIのキャプチャが成功すると画面右側に対象のUIが表示されます。
キャプチャ後、テストケース作成が可能です。
- 画面キャプチャの取得
-
テストケースの作成から実行まで
実際にテストケースを作成し、テストを実施するまでの流れについて簡単に説明します。
画面右側に表示されたキャプチャから、対象のUIを選択してステップを追加します。
ステップの追加が完了したら、画面左下の「実行」ボタンを押下します。
これにより、作成した一連のテストケースが実行されます。
※UIの選択はドラッグ＆ドロップでも選択できますが、上記の手順のように画面右の「要素選択」を押下して各UIを選択するとステップが多い時に作業時間を削減することができました。
今回は簡単なテストケースで実施しましたが、1～4の手順を確認してもらえればわかるようにMagicPodでは直感的かつ誰にでも簡単に自動テストを実施できます。
MagicPod導入にあたって
MagicPodを実際に使ってみて導入前に知っておきたかった点や、次回使用時に意識したい点を紹介します。
-
縦長のキャプチャが取得できない
テスト実行後に画面キャプチャのエビデンスを取得するといったケースは多いですが、MagicPodで実施したテストのキャプチャについて縦長のキャプチャを取得することはできません。
以下がテスト実施後のキャプチャになります。
GIFを見ていただければわかるように画面の一部しか取得できておらず、見切れてしまいます。
代替策としては取得したい対象の要素までスクロールしてキャプチャを取得するといった方法で、公式でもこちらの手順が推奨されています。
テストによっては縦長のキャプチャを1枚のファイルで取得したい場合があると思うので、そういった場合にはMagicPodとは別でキャプチャを取得する、1枚のファイルでキャプチャを取得できないことを割り切ってMagicPodを使用するのいずれかだと思います。 -
モバイルで拡張機能が使用できない
テストによっては拡張機能を使用してテストを実施する場合があります。MagicPodではテスト実施前に詳細設定タブから使用する拡張機能をインポートすることができるのですが、画像を見てもらえれば分かるようにWebの詳細設定の画面下部にはChrome拡張機能があり、モバイルの詳細設定ではChrome拡張機能がありません。
MagicPodの公式に問い合わせたところモバイルでの拡張機能サポートは未実装との回答がありました。
（Webの詳細設定）
（モバイルの詳細設定）
-
テスト用のロケーターを作成する
これはMagicPodを使用する場合に限った話ではないですが、開発段階からテストを円滑に行うためテスト専用に要素を一意に識別するロケーターを開発の段階から作成する必要があります。
こちらの資料に紹介されているようにMagicPodにはロケーターに変更があった際に自動修復する機能が備わっています。しかし、修復し損ねるケースもあるようで、画面に変更があった際にも問題なく自動テストを実施できるようにするため、テスト専用ロケーターを作成する重要性を感じました。ちなみにMagicPodでは画像のように、対象のUI部分にカーソルを当て鉛筆マークを押下することで現在使用しているロケーターの確認、および変更が実施できます。
-
各ステップでの画像差分時の比較方法
MagicPodにはこちらで紹介されているように画像差分チェックに使用するステップがあります。
こちらの画像差分チェックのステップはマイグレーションなどによる現新比較する際に有用なステップとなります。しかし「1. 縦長のキャプチャが取得できない」でも述べたように一括実行で取得したエビデンスは縦長の画面の場合、1枚のキャプチャとして取得できず、画面が途中で見切れてしまい、1画像での差分チェックができません。
そのため「画面の見切れる場所までスクロール」→「画像差分チェック」→「画面の見切れる場所までスクロール」→「画像差分チェック」・・・というようにステップ数を増やして画面の差分を比較することが考えられますが、公式ドキュメントでは、1テストケースに大量の画像差分ステップを入れることはメンテナンス、実行時間の負荷といった観点から推奨されていません。
このように1画像での差分チェックができず、メンテナンス、実行負荷がかかるという問題を解消し、さらに画面全体の差分を検知するため各ステップで取得したエビデンスの差分を検出する必要が生じたためWinMergeというツールを使用しました。
WinMergeはMagicPod上で使用できず、以下の手順で運用しました。- 最初にMagicPodを使用して取得した差分をチェックしたいエビデンスをローカル上の任意の位置に配置します。
- 次にWinMergeを起動してファイル > 開くから比較したいファイル、フォルダを選択し比較対象のものを選択します。
（比較するものが複数ある場合は画像を格納したフォルダごと選択することで画像を一括で比較できます。）
- 出力した差分は黄色でマークされている部分になります。ここではログイン時間の差分を検出しています。
- 最初にMagicPodを使用して取得した差分をチェックしたいエビデンスをローカル上の任意の位置に配置します。
WinMergeを活用することで複数の画像ファイルに対して一括で差分検出を行うことが可能になります。MagicPod上でステップを追加して比較処理を行う必要がなくなるため、メンテナンス性を損なうことなく、実行パフォーマンスへの影響も最小限に抑えることができます。
この手法は現行仕様を維持するマイグレーション案件において採用され、MagicPodへの負荷を軽減しながら、画像差分の確認作業を効率化するという点で非常に有用でした。
まとめ
自動テストツールを初めて使用しましたが、手動テストと比較して、以下の点にメリットを感じました。
- 現新比較やUI変更時の柔軟性
マイグレーション時の現新比較や、新規開発でUIに変更が入った際も、一度大まかなテストケースを作成しておけば、再度一からテストを実施する必要がありません。UIに変更があった場合も、必要なステップを追加するだけで、テストを簡単に繰り返し実施できます。 - 学習コストの低さ
MagicPodは直感的に操作できるツールで、セットアップさえ済ませればすぐに利用を開始できます。一部ロケーター関連ではHTMLの知識が必要ですが、それ以外はプログラミング等の知識がなくても実施できるため、導入ハードルは非常に低いと感じました。
その他にも公式ドキュメントが日本語で充実しているため、困ったことがあればすぐに確認でき、大抵の問題は解決できます。公式ドキュメントで解消できない場合でも、公式サポートに問い合わせると2～3営業日以内に返答があり、真摯に対応してもらえるため、導入時の不安も少ないと感じました。
ここまででMagicPodの基本的な使用方法と今後導入するにあたって留意したい点を紹介しました。MagicPodを使用することで誰でも簡単に自動テストを実施できることがお分かりいただけたと思います。これからMagicPodを導入する方、使用を検討している方の参考になれば幸いです。
