スマホアプリのE2Eテストを自動化してみた話

Tweet

こんにちは！
クラウドソリューション開発部の大川です。

今回はReact Nativeで作成したスマホアプリのE2Eテストを自動化するために、Maestroを使ったので、それについて紹介したいと思います！

Maestroとは？

『Maestro』は、モバイルアプリのE2E（End-to-End）テストをシンプルに行えるテストフレームワークです。
セットアップが容易で直感的にテスト項目をスクリプトで作成可能な点が魅力です。

Maestroの特徴

シンプルなテスト記述

MaestroはYAML形式でテストケースを記述できるため、テストコードの可読性が高く、非エンジニアでも編集しやすいのが特徴です。Sleepなどの遅延処理の記述は不要です。

クロスプラットフォーム対応

iOS・Androidの両方で同じテストケースを実行可能で、一貫性のある動作確認ができます。

Maestroのセットアップ

Maestroをローカル環境にインストールします。

Maestroの基本的なテスト記述

現時点では、Maestroには画面操作を記録して自動でテストスクリプトを作成する機能はありません。そのため、テストスクリプトは手動で記述する必要があります。

以下はログイン機能のテストスクリプトの例です。

このスクリプトでは、アプリを起動し、IDとパスワードを入力し、ログインボタンを押してログイン認証ができることを確認しています。

テスト実行と結果の活用

テストスクリプトを作成したら、以下のコマンドでテストを実行します。

テスト実行後は、結果が標準出力にログとして表示されます。

アプリの操作を自動化する以外にもOS側の設定に干渉することが可能です。

システム系

• launchApp：アプリを起動
• stopApp：アプリを終了
• clearState：アプリのデータを初期化
• addMedia：デバイスに画像を追加
• setLocation：擬似的なロケーションを設定（緯度・経度）
• travel：ユーザの動きを想定した擬似的なロケーションの設定（緯度・経度）
• startRecording：画面収録を開始
• stopRecording：画面収録を終了
• takeScreenshot：スクリーンショットを取得
• evalScript：JavaScriptの実行
• runScript：外部ファイルからJavaScriptの実行
• runFlow： 外部ファイルからymlを実行する

画面収録が可能なのでスクリプトを実行後に証跡動画の保存ができます。
証跡動画があれば一目で確認ができるので、テスト実行中の目視確認は不要です。

工夫次第では、CI/CDパイプライン（GitHub Actionsなど）と連携してテスト結果の自動判定やレポート出力、さらにはSlackなどと連携してエラー通知を受け取る仕組みを構築することが可能です。

Maestroで検出可能なテストケースについて

MaestroはYAML形式で各テストステップを記述するため、どのステップでエラーが発生したかを明確に把握できます。
そのため、各テストケースの項目と実際の検出結果を容易に対応付けることができます。
また、検出可能なエラーのレベルとしては以下が挙げられます。

画面遷移エラー

正常な画面遷移が行われなかった場合、該当ステップでエラーとして検出されます。

画面要素の不一致

指定したテキストや要素が画面上に存在しない場合、テストは失敗となり、要素の不一致を検出できます。

レイアウトの確認

厳密なレイアウトチェック（ピクセル単位の比較など）は、Maestro単体では難しいですが、スクリーンショットを取得する機能と外部ツールの組み合わせにより、OpenAIなどでレイアウト比較検証を行うことが可能です。

実際のテスト実行例

以下の動画は、Maestroによる自動テストの実行例になります。

まとめ

Maestroを利用することで、React Nativeで作成したスマホアプリのE2Eテストをシンプルかつ効率的に記述・実行でき、テスト自動化を推進することが可能です。
また、テスト結果のログ解析やCI/CDパイプラインへの組み込みにより、担当者の目視確認に頼らず自動でテスト結果をフィードバックする仕組みも構築できます。
各テストステップと結果が明確に対応付けられるため、エラー検出も迅速かつ正確に行えます。
今後のアップデートやツールとの連携で、さらに使い勝手が向上することが期待されます。

終わりに

エコモットでは一緒にモノづくりをしていく仲間を募集中です！
弊社に少しでも興味がある方、ぜひ下記の採用ページをご覧ください！