E2E自動テストツール MagicPodをチームで使って、E2Eテスト自動化をやってみた感想

# はじめに
皆さんは普段の開発でテストは自動化していますでしょうか？

もちろんpytestやJasmineなどの各バックエンドやフロントエンドの単体テスト、APIレベルの結合テストはPostmanなどを使った自動化をやっている方が多いと思います。

しかし、**E2E（End-to-End）テスト**と呼ばれるフロントエンドとバックエンドを組み合わせた最終段階のテストでは、自動化までできていないチームも多いのではないでしょうか？

これまでのE2Eテストの自動化では、Appium/SeleniumやPuppeteerを使うケースが多くみられていましたが、テスト構築に時間がかかり、E2Eテストで複雑なテストケースや多くのテストケースを作成することは非常に困難でした。

本記事では、<font color="red"><b>MagicPod</b></font>という**E2Eテスト自動化をができるノーコードツール**について、使ってみた感想などをご紹介いたします。


# MagicPodとは？
MagicPodはE2Eテストを自動化するための、非常に強力なツールです。
Youtubeの動画が手っ取り早く理解できます。

https://magicpod.com/

https://www.youtube.com/watch?v=nqZqRxa4CYk


# MagicPodによるテスト自動化
それでは、MagicPodの簡単な使い方をハンズオン教材によるデモ画面で説明していきます。

以下のようなシンプルなスマホ向け電話アプリのE2Eテストを作る場合を想定しています。
こちらの電話アプリはアップロードなどにより、MagicPodのバーチャルクラウドのスマホOS(Android/iOS)上で起動しています。

![MagicPod1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706974/fb3fb2fe-7585-686b-3285-113e392244da.png)

:::note
バーチャルクラウド上で動作させることもできますが、実機端末を使ったテストも可能です。ただし、こちらのテストは現状少し制約も多いので、私自身はまだ実施できていません。
:::


MagicPodブラウザ上では、起動しているアプリのUI要素を読み込み、右側に表示されます。
こちらの例では右上のスターアイコンをMagicPodが識別しています。

![MagicPod2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706974/ee0f8436-af96-b8fa-3bf7-4e7d1fdf95ec.png)


また、スターアイコンの詳細を確認すると、ロケータも詳細に表示されます。

![MagicPod3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706974/8bbad61d-63b3-5db7-aa1b-15cc01b24fbc.png)


右側の画面要素を選択して左側にUI要素をドラッグ＆ドロップするだけで、簡単にテスト項目が作成できます。
テスト項目はUI要素に対するアクション（例：タップする、指定文字を入力する）などを設定できます。
これで１つのUI要素に対するテストステップが完成となります。

![MagicPod4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3706974/d5e58f8f-0b5a-e720-fe7b-6c83dccc81f9.png)

最後にこれらのステップを組み合わせて事項することで、自動テストが可能となります。

:::note
アプリのローディングによる待ち時間を設定したり、次の画面切り替えを検知して次のステップを実行するなど、テストを自動化するためのアクションも多く用意されています。
:::


# MagicPodを使ってみた感想
実際にMagicPodを使ってみて以下が特徴だと感じています。

### ①ノーコードでE2Eテストが自動化できるので、未経験者をテスト構築者にアサインできる
Appium/Seleniumなどの自動化ツールはコーディングの技術が必要となるため、テスト構築者にもある程度の技術レベルを持つエンジニアをアサインする必要があります。
実際にアジャイル開発となると、テストコーディングを作業の多くを占めてしまうケースも多くないと思います。

MagicPodは**ノーコードツール**のため、テスト構築者の技術レベルに関係なく、テスト自動化ができるのは非常に強みです。
実際に、新人レベルの担当者をアサインしましたが、すぐに使いこなすことができました。


### ②作成した複数のテストステップを取りまとめて、共有ステップとして他のテストケースにも流用できる
ノーコートツールとは言え、1つ1つのテストステップをドラッグ＆ドロップして作成していくのは手間がかかります。
しかし**共有ステップ**を使って良く使用するステップ（例：ログイン処理など）をまとめておくことで、他のテストケース作成が非常に効率化できます。


### ③作成したテストケースはいつでも実行でき、定期的なスケジュール実行ができる
もちろん作成したテストケースは、定期的なスケジュールでの実行ができます。
毎日の定期実行だけでなく、デプロイ後の一括実行などフェーズに合わせた自動テストができます。


## 余談：APIテストの自動化はPostmanでやっていた
MagicPod使用時は単体テストとAPIテストは自動化していましたが、フロントエンド開発の経験がほぼなかったためE2Eテストの自動化に非常に苦労していました。
ちなみに、APIテストの自動化については、過去にPostman様のイベントで登壇した資料を公開しておりますので、ぜひご覧ください。

https://speakerdeck.com/yukiogawa/postmanwohuo-yong-sitajia-dian-apuripuratutohuomuapinoshi-yan-xiao-lu-hua


## 個人的な使いづらかったところ
と、ここまでMagicPodの良い点ばかり紹介していましたが、以下は課題点として挙げておきます。

### 課金アプリがテストできない
以下により対応していないとのこと。
私は、結局課金処理部分を外してビルドし、対応しました。

https://support.magic-pod.com/hc/ja/articles/28831871256217-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E8%AA%B2%E9%87%91%E3%81%AE%E3%83%86%E3%82%B9%E3%83%88%E3%81%8C%E3%81%97%E3%81%9F%E3%81%84


### 読み込まれるUI要素が不安定
UI要素を選択しても、なぜかステップで失敗してしまうケースもありました。
これはロケーターをうまく設定することで回避できるとのことでしたが、フロントエンドを改修するまでには至りませんでした。

https://speakerdeck.com/nozomiito/roketawoxue-ndetesutozi-dong-hua-shang-ji-zhe-womu-zhi-sou


# まとめ
今回はE2E自動テストツールであるMagicPodについて、使ってみての感想を書いてみました。
E2E自動テストツールとしてはとても使いやすいので、さらに改善していってもらえると嬉しいです。