※ こちらはミツモアAdvent Calendar 2022の20日目の記事です。
こんにちは、ミツモアのQAエンジニアの山本です。
この記事では、QAチームで自動E2EテストツールとしてAutifyを導入した話をします。
Autifyを導入したきっかけ
Autifyを導入する前、puppeteerやCypressで主導線を自動化していました。 一方で、小~大規模含めて月10件前後は仕様変更を含むプロジェクトが動いており、HTML要素のclass属性情報も自動生成だったため実行結果が安定せずメンテナンスコストが高いのが実情でした。そこで新たな自動テストツールを導入することになります。
検討したこと
最初に結論付けた受け入れ条件は、以下の通りです。
①要素の特定に長けている
②AIによる「オートヒーリング」機能がある
A/Bテストやプロダクト改善が盛んなため、レイアウトや属性情報の変更にも柔軟に対応できる必要がありました。QAチームのメンバーが常時複数のテストプロジェクトを担うため、自動テストの構築やメンテナンスが簡単なツールを探していました。
加えて、見積もりプラットフォームのプロダクトの特性として発生する「依頼者」「プロ」「ミツモア運営事務局向けの社内システム」の3者の複雑な状態遷移を含むやり取りにどこまで対応できるかが一つの課題と考えていました。
議論とトライアルの結果、結論としてAutityを導入するに至ります。
導入時の所感
結論としては「良かった」が最初の所感です。 受け入れ条件としていた要素の特定ですが、現状の Autify の機能では完全自動化は難しかったものの、それを補う仕組みがいくつもあり、それで解決することができました。 導入の時に工夫した点を紹介します。
ロケータの指定
HTML要素の特定はAIによる自動検知機能はありますが、class属性の情報が変化すると特定に時間がかかったり、ときには特定に失敗することもありました。HTML要素の特定を安定化させるためのロケータとしてCSSセレクタを利用しました。セレクタの一部が変数の部分は正規表現を使っていました。
JSステップを利用してAPIを叩く
ミツモアでは画面操作では対応しにくい処理があり、それを実行しないと先のテストケースへ進めない状態でした。 具体的には、プロと依頼者のマッチを定期ジョブで実行していますが、E2E テストに組み込む場合、ジョブが実行されるまで待機する必要がありました。 定期ジョブは前倒しで実行しても問題なかったため、Autify から API を直接叩くことで処理できるようにし、その先のテストケースに進めるようにしました。
ブラウザ依存のカレンダーで日付を指定する
シナリオ上の一部コンポーネントにAutifyが対応していないブラウザ依存のカレンダーが使用されていたため、最初はしばしばテストが失敗していました。参考記事の方法で解消しました。
カレンダーの日付指定用に変数を含むセレクタを生成する
カレンダーで日付指定が継続的にできるよう、JSステップを用いて現在時間からn日後の日付を選択できるようにしました。 具体的には、JSステップで属性の日付部分を変数化し、ゼロ埋めした戻り値をクリックステップの引数として利用しました。
社内で工夫したこと
ミツモアの「依頼者」「プロ」「ミツモア運営事務局向けの社内システム」の３者間のやりとりには課題がありました。
Autifyでは1シナリオあたり最大でも200ステップがサポート対象の範囲です。しかし新規依頼者アカウント、新規プロアカウント同士で3者間ダイアログのシナリオを組もうとすると、プロのセットアップ部分だけで100ステップ前後を消費します。主導線の最後までのシナリオを組もうとするとサポート対象外のステップ数になります。
これを解消するために、社内システム上で自動テスト向けに既にセットアップ済みのプロアカウントをクローン可能にすることでステップ数を軽減し、主導線で必要なテストケースに対応できるようにしました。 また、他のサービスと設定を合わせながらテスト環境にAutify自動テスト用サービスを作成し、他の社内ユーザーが作成した依頼などの余分なデータを誤って取得しないようにしました。
状態遷移には前述のJSステップを使用しつつ、全てのシナリオで３者間のやりとりをサポート対象ステップ数の上限以下で完結させることが可能になりました。
便利だった機能
工夫は必要な一方で、Autifyでは様々な便利機能が用意されているので、個人的に良かったと思う機能を一部紹介します。
UI差分検知
テストシナリオの作成が簡単で、テスト実行成功だったとしてもUIに差分があればパーセンテージを表示してくれます。なおかつ、UIの差分の場合はテスト成功とするか失敗とするかを選択できるため、そのログで何が正しい表示かを指定できます。
※ ここでは背景色とシカのキャラクターのカードを囲う模様の差異を検知しており、55%の差分があると表示されています。
テスト失敗時の原因特定
エラーが発生すると、エラーメッセージコピーを一瞬でコピーして簡単に失敗原因を特定することができるのもメリットです。シナリオ内の失敗箇所のスクリーンショットもすぐに確認できます。
なぜエラーが発生しているか特定に困った場合は、Autifyのサポートチームの支援を受けることも可能です。困ったときにお世話になっています。
定期実行
特定のシナリオをAutify上で指定して定期実行することも可能です。 定期実行したいシナリオを指定してタイミングを指定するだけで継続実行できます。 デプロイのタイミングでテストを実行するにはCIツールに組み込む必要がありますが、ミツモアではCircleCIと連携してデプロイの前にテストを実行しています。
シナリオの切り取りと貼り付け
ステップグループという機能で作成したシナリオの一部を切り取り、他のシナリオで使い回すことができます。ステップグループやJSステップで、特定部分を使い回すことでシナリオ作成が効率的でした。
Autifyを取り入れたミツモアQAの現在地
Autifyを取り入れたことで、テスト計画・設計・実行などマルチタスクをこなしながら自動テストを運用できる体制になりました。 プロダクトも１つから２つに増え、新規プロダクトのスピーディーな開発に自動テストが追いつくためにもAutifyは重要な役割を果たしていると考えています。
一方で、HTML要素の属性情報が自動生成される場合にはある程度オートヒールするものの実行に失敗することもあります。
今後はHTML要素のdata-test-idを用いて安定性を高める方向性です。
また、Autifyの自動テストだけでなく、適材適所でCypressなどのコードベースツールとの併用などに向けても動こうとしています。 Autifyはしっかり活用しながら、QAチームとして全体最適とエンジニアリング力の向上を引き続き目指していく所存です。
最後に
ミツモアのQAチームは新しい技術やツールの導入にオープンな環境です。 QAエンジニアはただテストに従事するのではなく、テストプロジェクトをリードしながら優秀な開発エンジニアやPdMと品質やUXについてオープンに議論する文化があります。 ご興味のある方は気軽にカジュアル面談をお問い合わせください。
