この記事はレコチョク Advent Calendar の12日目です。
株式会社レコチョクのNX開発推進部Androidアプリ開発グループの寺島です。

最近はハコニワリリィさんの曲をよく聴いてます。
とくにコガネゾラという曲が好きです。

はじめに

新しい機能を開発するとき、少なからず既存のコードに変更が生じます。その際、これまで正常に動作していた機能が動かなくなることもあります。この現象をデグレード（以下、デグレ）と呼びます。タイトルにも挙げたMagicPodは、自動でUIテストを実行できるツールです。MagicPodを使うことで、期待のユーザーシナリオ通りの動作をするか確認し、デグレを検知できます。

先日、私ははじめてWebサイト（以下Web）と iOS / Android スマートフォン向けアプリ（以下アプリ）が連携する機能のテストをMagicPodで作成しました。今回は、そのナレッジを共有したいと思います。

MagicPodとは？

まずはじめに、MagicPodの概要を説明します。

MagicPodは、モバイルアプリテスト、ブラウザ(ウェブアプリ)テストの両方に対応したAIテスト自動化クラウドサービスです。豊富な機能と高いメンテナンス性でリリースサイクルの高速化を支援します。

上記がMagicPodのサイトでの説明です。MagicPodは、実際のアプリやWebの画面を操作するテストを作成できます。ユーザーが実際に行う操作を再現することで、機能の不具合を検知できます。

何をテストしたかったか？

具体的に何をテストしたいか説明する前に、開発しているアプリとその機能について説明します。

Eggsアプリ
テストしたい機能について

Eggsアプリ

Eggsは、インディーズのアーティストが楽曲をアップロードすることができて、リスナーが楽曲を聴くことのできるサービスです。Eggsは、Webとアプリでサービスを展開しています。

今回の記事の中で出てくるEggsにある機能は以下の3つです。

楽曲のアップロード（Webからしかできない）
任意のアーティストのフォロー（アプリ・Webどっちでもできる）
フォローしたアーティストの楽曲を新着順で表示（アプリのみ）

テストしたい機能について

次に、テストしたいEggsアプリの機能について説明します。Eggsにはサービスに登録されているアーティストをフォローできる機能があります。さらにアーティストをフォローすることで、フォローしたアーティストの楽曲を新着順に表示する機能があります。

具体的に説明します。機能を1人のユーザーが使うまでの登場人物は以下の2人です。

楽曲をアップロードするアーティストAさん
アーティストAさんをフォローしているユーザーBさん

細かく機能の流れを図示すると、以下のようになります。

2のアーティストAが「楽曲アップロード」をWeb側で行っていて、1と3の「フォローする」と「新着楽曲表示」をアプリ側で行います。3の新着楽曲表示はユーザーが自分でアプリを触って、新着楽曲一覧を開く必要があります。

作成したテストケース

今回はWebとアプリでそれぞれテストケースを作成する必要があります。正確に言うと、iOSとAndroid、Webの3つに対して、それぞれテストケースを作成しました。AndroidとiOSは、ほぼ同様のテストになるため、Webとアプリの観点でテストケースについて説明します。

前述したように新着楽曲一覧の機能をユーザーが使う流れは以下のようになります。

任意のアーティストをフォローする
1でフォローしたアーティストがWebで楽曲をアップロードする
フォローしているアーティストの新着楽曲を確認する

この流れをWeb側とアプリ側でテストケースを作成すると、自動テストを行えます。

今回はMagicPodでのテストケース作成の方法は細かく説明しません。

Web側のテストケース

まず、アーティストが楽曲を新たにアップロードした事を再現するために、MagicPod側でサービスに楽曲を登録します。

実際に作ったテストケースの流れは以下のようになります。

EggsのWebサイトTopページに遷移する
ログインした状態にする
1. アーティストAのアカウントでログイン
楽曲アップロード
1. 楽曲のジャケットを指定
2. 楽曲の音源を指定
3. 楽曲名を指定

上記が大まかな楽曲の登録時のテストケースになります。ここで重要になってくるのが、3-3にある「楽曲名を指定」です。指定する楽曲名をWeb側とアプリ側で同じ値にすることで、Web側でアップロードした楽曲をアプリ側で確認できます。

この時、楽曲名を固定にしてしまうとテストを自動実行したときに、最新の楽曲が追加されたかMagicPod側で判定することができません。たとえば、楽曲名を「新機能Test」のような名前にします。この場合、自動実行で追加された曲は、常に「新機能Test」になります。MagicPodでは画面の状態をみてテストをします。そのため、どの楽曲がどのタイミングでアップロードされた楽曲かを判定するには、画面上に見える部分で判定できるようにする必要があります。下の画像はそれぞれMagicPodがみている画面だとします。（ここであげている画像はあくまでも画面を例えたものです。）

左の画像は、楽曲名でいつ楽曲が追加されたかを画面から判断できます。しかし、右の画像は、楽曲名だけではいつ楽曲が追加されたか画面から判断できません。このことからMagicPod上で新着楽曲が追加されたことを確認するためには、日付を楽曲名に指定しなければなりません。Web側でテストを実行した日付の楽曲名が存在するか確認することで、アプリ側で新しく追加された楽曲が正しく表示されたか確認できます。

次に、楽曲名をどのように日付にするかを説明します。MagicPodのテストのステップでは、任意の変数に日付を入れ込むことができます。今回はそれを利用して、楽曲のタイトルをアップロードした日付にします。以下が実際のテストケース中のステップです。

上記のようにすることで、テストを実行した日付が楽曲のタイトルになります。たとえば、2024年12月12日にこのテストケースを動作させると、楽曲のタイトルは「2024-12-12」になります。

アプリ側のテストケース

次にアップロードされた楽曲が新着楽曲の一覧に正しく表示されたかを確認するテストケースを作成します。

実際に作ったテストケースでの流れは以下のようになります。

アプリを起動する
ログインした状態にする
1. ユーザーBのアカウントでログイン
新着楽曲一覧を表示する
アップロードされた楽曲があるか確認する
1. 指定した楽曲名を変数に持たせる
2. 変数と一致する楽曲があるか確認

アプリでも同じように指定した日付を変数に持たせることができます。Webの時と同様にして、実行日を変数に格納できるため、その変数と一致する楽曲名が存在するかを確認します。実際のステップが以下になります。

Web側で2024年12月12日にアップロードのテストを実行した場合は、アプリ側では楽曲名が「2024-12-12」になっている楽曲が存在するかを確認します。もし、期待する楽曲が存在していれば、正しく機能しています。

運用について

最後に運用について説明します。

今回のWebとアプリのテストでは、「テストを実行した日付」によって、機能が動いているかを確認しています。テストは以下の順で実行させる必要があります。

Web側のテスト
アプリ側のテスト

また、Web側のテストが完全に実行完了してからアプリ側のテストを実行させる必要があります。この点は、MagicPod側で用意されているテストのスケジューリング機能を使用して解決しました。

MagicPodでは、作成したテストケースにラベルを付けて、そのラベルごとに一括でテストケースを実行させることができます。

これが実際のテストケースにラベルを付けた状態です。このテストは水曜日15:00～実行するように、上のラベルを付けてます。

上記のようにラベルをつけることで、実行タイミングを設定できます。（細かな設定方法は、こちらを参照ください。）

MagicPod上では現状テストの一括実行は、Webとアプリで同期をとって実行することができません。今回のテストは、Web側のテストの実行が完了してから、アプリ側のテストが動くようにしなければなりません。そのために、上記のスケジュール機能を使って、Web側のテストだけ早めに実行するように時間を設定しました。

このようにして、Eggsでは新着楽曲の表示機能をテストできるようにしました。

まとめ

今回はMagicPodがUIテストであることを意識して、アプリ側の画面に表示される内容から新着楽曲が正しく表示されているかを確認できるテストを作成しました。これによって、Web側でのテストが成功しているのにアプリ側のテストが失敗した時は、フォローしたアーティストの新着楽曲一覧の機能が正しく動作していないことが分かります。このテストを週次で自動実行し、テストの結果を確認することで今後の開発によるデグレを検知できるようになりました。

ここまで読んでいただきありがとうございます。

参考

明日のレコチョク Advent Calendar は13日目「User-Agent Client Hintsについてまとめてみた」です。

この記事はレコチョクのエンジニアブログの記事を転記したものとなります。