日本語React NativeアプリのE2Eテストを自動化してみた
こんにちは。MagicPod カスタマーサクセスのIshiiです。
最近はWeb開発でReactの人気が高まっている影響や、React Nativeの開発サポートツールであるExpoの発展により、React Nativeで構築されたアプリが増えつつあるように感じます。
React NativeアプリのE2Eテストの自動化では、コードツールであるDetoxやMaestro、Appiumが候補に挙がることが多いです。しかしながらコードツールではQAエンジニアの方が自動化することが大変であったり、定期的に実行する環境を構築することが難しかったり、なかなかハードルが高いかと思います。
MagicPodであればビルドしたAndroidの.apkファイル(iOSでは.appファイル)を手元に用意するだけで、クラウド環境でノーコードでテスト作成ができます。MagicPodではReact NativeアプリのE2Eテスト自動化実績が多数ございますので、サポート面も充実しています。生成AI機能であるMagicPod Autopilotを使えば、自然言語でのテスト作成も可能です。
本記事では、React NativeアプリのE2Eテスト自動化を始めたばかりの方やツール導入を検討している方に向けて、MagicPodでどのようにテストを作成できるかについて解説します。
目次
React Nativeとは？
まずは簡単にReact Nativeとは何かについてご説明します。（すでにご存じの方は次の章にお進みください。）
React Nativeとは、Reactでモバイルアプリを開発できるフレームワークです。iOSとAndroidの両方に対応しており、一つのコードベースでクロスプラットフォームのアプリを作れるのが大きな魅力です。
React Nativeには以下のような特徴があります：
クロスプラットフォーム開発
一度書いたコードを、iOSとAndroidの両方に展開できます。従来はそれぞれネイティブ言語（Swift/Objective-CやJava/Kotlin）で別々に開発する必要がありましたが、React Nativeなら共通化でき、開発コストを削減できます。
Reactの知識を活かせる
Web開発で使われるReactと似た考え方でコンポーネントを組み立てていくため、React経験者は比較的スムーズに学べます。React NativeであればWeb開発の経験者中心のチームでもモバイルアプリ開発に挑戦しやすいです。
ネイティブUIの利用
WebViewを使わず、ネイティブのUIコンポーネントを呼び出すので、見た目や操作感がネイティブアプリに近い自然な体験になります。
近年、React Native開発に必須となりつつあるツールセットがExpoです。私はWeb開発の経験が長く、モバイルアプリの開発には不慣れだったのですが、Expoのおかげで簡単に環境構築・開発・検証・ビルドを行うことができました！
具体的にはExpoを用いた開発には以下のようなメリットがあります：
セットアップが簡単
XcodeやAndroid Studioの環境構築を最初から完璧に整える必要がなく、すぐに開発を始められます。
豊富なAPIが標準で使える
カメラ、位置情報、通知など、よく使う機能がExpoに内蔵されているので、自前で複雑な設定をしなくても利用できます。
Expo Goアプリで動作確認
実機に「Expo Go」というアプリをインストールすれば、開発中のアプリをQRコードで簡単に確認できます。
MagicPodでReact Nativeアプリのテストを作る
ここではExpoのチュートリアルで作成したAndroidアプリに対してMagicPodでどのようにテストを行うか解説していきます。
このアプリは、アップロードした写真に対しスタンプでデコることができるアプリです。（「デコる」という言葉を平成ぶりに使用しました...🌈）
このアプリをテストする場合、考えられるテスト項目は以下の通りです。
- アプリ起動時にトップ画面が表示されること
- 「About」タブをタップすると、「About」ページが表示されること
- 「Choose a photo」をタップして、指定した画像を追加できること
- スタンプをタップすると、画像左上エリアにスタンプが表示されること
- スタンプをダブルタップすると、スタンプが大きくなること
- スタンプをドラッグ＆ドロップすると、スタンプが移動すること
- 「Save」ボタンをタップすると、画像が写真フォルダに保存されること
MagicPodでは上記の項目であれば全てテスト可能です。
早速ですが、こちらが完成したテストを実行している様子を撮影したものです。
一部確認項目を割愛していますが、手動テストよりもスピーディに完了する様子が確認できるかと思います！
それでは具体的にどのようにテストを作成するか説明していきます。
事前準備：APKファイルをアップロードする
テスト対象アプリのAPKファイルをテスト編集画面のテスト実行設定画面からアップロードします。
今回はMagicPodの画面からアップロードしましたが、WebAPIを通じてアップロードすることも可能です。GitHub ActionsやBitriseなどのCIツールと連携し、ビルド→アプリファイル（.apk/.app）をMagicPodにアップロード→テスト実行、という一連のフローを自動化しているユーザー様も多くいらっしゃいます。
せっかくテスト自動化を行うのであれば、アプリファイルのアップロードもCIツールで完全自動化することをお勧めしています。Bitrise連携をしているこちらのお客様事例もあわせてご覧ください。
▼お客様事例
株式会社ウェザーニューズ様：MagicPodを導入したことで実装に回せる開発リソースが増え、より多くのコンテンツが出せるようになった。
正しい文言が表示されていることを確認する
それでは早速テストを作成していきましょう。テスト編集画面では左側にテストステップ、右側にクラウド端末が表示されるような構成になっています。そのため、クラウド端末を操作しつつ、テストステップを作成可能です。
それでは「About」タブをタップすると、Aboutページが表示されることを確認する、といったテストを作ってみましょう。
このようなステップで、Aboutページに表示されているべき「About screen」という文字列が表示されていることを確認するテストを作ることができます。
ここではUI要素の値が一致するか確認コマンドを使用していますが、「値を含むか」という部分一致で確認できるコマンドや、正規表現や数値比較のコマンドもあります。豊富な確認コマンドを用いて柔軟なバリデーションができることもMagicPodの魅力の一つです。
画像アップロード機能をテストする
モバイルアプリのテストでは、写真をアップロードする機能のテストをする機会が多いと思います。MagicPodでは、端末に画像を追加というコマンドで画像をクラウド端末に追加できるため、任意の画像をアップロードしてテストを行うことができます。
テストケースの対象ステップのみ部分実行したところ、以下画像のようにMagicPodのロゴマークをアプリに追加できました。
タップ/ダブルタップをテストする
MagicPodではタップだけでなく、ダブルタップもサポートしています。
ダブルタップコマンドについては、タップの間隔を調整することができます。「ダブルタップが上手く動作しない」といったケースがあれば、ぜひ間隔を調整してみてくださいね。
ドラッグ＆ドロップをテストする
MagicPodではドラッグ&ドロップコマンドで指定された要素をドラッグして別の要素にドロップさせることができます。
ドラッグ元の要素とドロップ先の要素のXY座標を指定することもできるので、細かい調整も可能です！
写真保存機能をテストする
MagicPodでは１つのテストケース内で、テスト対象アプリと異なる別のアプリを開くことが出来ます。例えば、指定されたAndroidアプリを起動コマンドでGoogleフォトアプリを起動し、特定の画像がAndroid端末の写真フォルダに保存されているかを確認するテストが作れます。
Googleフォト、Chrome、設定アプリなどのデフォルトのアプリはAppパッケージを指定するだけで簡単に起動できます。（iOSの場合はバンドルIDを指定すればSafariなど起動可能です。）詳しくはヘルプページをご参照ください。
参考ヘルプページ：モバイルアプリテストのスクリプトから、モバイルブラウザなど他のアプリを開きたい
写真フォルダに保存されている画像が想定通りか、というテストについては画像差分チェックというコマンドを活用することができます。差分の確認が簡単にできる、許容不一致率や除外領域が設定可能、といったかなり便利な作りになっているので、ぜひヘルプページをご覧いただけると嬉しいです。
参考ヘルプページ：画像差分チェック
React NativeのE2Eテストをより安定させる
E2Eテストでは、いわゆるフレーキーテストとよばれる不安定なテストによりメンテナンスに苦労しがちです。テストを安定化させるための一つの解決策がユニークなidを要素に追加することです。
このExpoチュートリアルアプリには一意な要素特定が難しい箇所がいくつかありました。例えばスタンプを選択する画面では、各スタンプにidが付与されていないため、「X個目のスタンプ」といった表示順番に依存するロケーターで特定するしかない状況です。
この場合、将来的にスタンプが追加された際に表示順番が変わり、テストが壊れる可能性があります。ここでは「ドーナツのスタンプをタップする」というようにスタンプを特定してタップすることにより安定させることができます。
React NativeではtestIDをソースコードに追加することで、テスト用のidを付与することができます。testIDを追加後、「donut」というidで要素が選択できるようになりました。
ユニークなidを付与する以外のテストを安定させるためのTipsについてはこちらのヘルプページで解説していますのでぜひご覧ください。
参考ヘルプページ：テストの安定性を向上させるには
生成AI（MagicPod Autopilot）でテストを作る
MagicPod Autopilotとは、自然言語による指示でテストを自動生成するAIエージェントです。
画面の遷移やテストの内容を考慮した高品質なテストを、プログラミングスキルがなくても簡単に作成することができます。
ここでは「About」ページが正常に表示されていることを確認するテストを作ってみましょう。
## プロンプト
「About」タブをタップしたときに、「About」ページが正常に表示されているか確認するテストを作って。「About」ページで「About screen」という文字列が表示されていることを確認してください。
無事想定通りのテストが生成されました🎉
丁寧にコメントも入れてくれています。ちなみに「テスト対象アプリを起動」コマンドについては不要なステップなので削除可能です。（引き続き生成品質向上に努めてまいります！）
このようにMagicPodでは生成AI機能により簡単にテスト作成ができるようになっていますので、ぜひご活用ください。
参考ページ：MagicPod Autopilot
React Nativeアプリのテスト作成時の注意事項
最後にReact Nativeアプリを自動化する際の注意事項を2つご紹介します。
React Nativeアプリでテスト作成ができないことがある
React NativeではUIツリーが深くなってしまう現象が確認されており、その現象が生じている一部アプリについてはテストを作成することが出来ません。具体的には、UIツリーの深さが50以上の場所にある要素については、XCTestライブラリ、Appiumの制約があるためMagicPodにてUI要素として取得出来ません。
詳しくはこちらのヘルプページをご参照ください。
参考ヘルプページ：React Nativeアプリをテストする際の制限事項
WebViewの画面のテストが不安定になる
React Nativeなどのハイブリッドアプリを開発していると、WebViewを使うケースが多くあります。
しかし、自動テストの観点から見ると、WebViewの画面は不安定になりやすいという課題があります。
MagicPodでは、こうしたWebView特有の問題を解決するために、WebViewをスキャンというオプションを提供しています。
このオプションを有効化すると、WebView内の要素をHTML構造として解析し、より安定した方法で要素を特定できるようになります。
使い方
1. MagicPodのテスト編集画面で、「要素選択」もしくは「キャプチャ」の下の▼をクリック
2. 「WebViewをスキャン」にチェックを入れる
3. 要素選択/スキャンを実行すると、WebView内のHTML要素が取得可能に
例えば、この画面はWebViewを使用してMagicPodのサービスサイトを表示させていますが、WebViewスキャンを行なっている右側のケースでは「//a[text()=’Request Demo’]」などのHTML要素がロケーターの候補として表示されています。
WebViewについて詳しくはこちらのヘルプページをご参照ください。
参考ヘルプページ：WebViewのテストについて
最後に
MagicPodではモバイルアプリの自動化に便利な機能を兼ね備えており、React Nativeアプリのテストをノーコードで簡単に作ることができます。また、生成AI機能であるMagicPod Autopilotを使用することで、自然言語でテストを作ることも可能です🚀
MagicPodにはReact Nativeアプリのテストを自動化しているユーザー様が多くいらっしゃるため、いただいたお問い合わせやご要望をもとに改善を行い日々進化しています。
「自社のReact Nativeアプリのテストは自動化できるだろうか？」というご相談も大歓迎です。
もしMagicPodが気になった方は、ぜひお気軽にお問い合わせください！
https://magicpod.com/consulting/
