メルカリにおける UIテストのこれまでとこれから 〜 App ＆ Web 〜 / The past and future of UI test in Mercari

メルカリという大規模プロダクトで実践しているテスト自動化について、WEBとAPPの品質や技術スタックの差異をまとめながら、メルカリのUIテストのこれまでとこれから、についてお話します。

1. 1 Confidential - Do Not Share メルカリにおける UIテストのこれまでとこれから 〜 App ＆ Web 〜 メルカリ AQA 関根 康史 おれたま@AHA_oretama
2. 2 Confidential - Do Not Share Automation＆QA Group（通称AQA） • 半年前にジョイン • テスト自動化 ◦ Appium, WebdriverIO, Espresso… ◦ CI/CD Links • https://github.com/aha-oretama • https://www.slideshare.net/aha_oretama • https://speakerdeck.com/ahaoretama 関根 康史 おれたま@AHA_oretama
3. 3 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
4. 4 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
5. 5 Confidential - Do Not Share メルカリにおけるこれまでのUIテスト iOS Android https://tech.mercari.com/entry/2018/08/07/123000 App https://tech.mercari.com/entry/2018/12/07/074346
6. 6 Confidential - Do Not Share なぜAppのUIテストだったか？ メルカリはAppメイン ⇒ビジネスに合わせた 　UIテスト戦略
7. 7 Confidential - Do Not Share Web UIテスト自動化へ • Webリアーキテクチャ • Webの重要度が高まる ⇒ビジネスに合わせた 　UIテスト戦略 https://speakerdeck.com/mercari/mtc2018-web-application-as-a-microservice
8. 8 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
9. 9 Confidential - Do Not Share リリースサイクル AppとWebの品質 切り戻し可 モニタリングも品質 バージョンが残る （強制アプデは望ましくない）
10. 10 Confidential - Do Not Share リリースサイクル UIテストのタイミング UIテスト UIテスト UIテスト UIテスト
11. 11 Confidential - Do Not Share ※私見を多分に含みます メルカリにおけるUIテストの立ち位置 App QAのためのUIテスト Web デベロッパー寄りのUIテスト
12. 12 Confidential - Do Not Share • （Automation＆QAの）全員自動化 ◦ Turnip UIテスト戦略の違い 〜App〜 https://speakerdeck.com/tadashi0713/merukarifalsetesutozi-dong-hua-zhan-lue
13. 13 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い 〜Web〜
14. 14 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い 〜Web〜
15. 15 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
16. 16 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
17. 17 Confidential - Do Not Share ※ここからはWeb UIテストのいまとこれからの話です。 　模索中の話も含みます。 メルカリにおけるWeb UIテストのいまとこれから DONE WIP
18. 18 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
19. 19 Confidential - Do Not Share Webチームから • （ある程度）マニュアルQAなしでリリースできる • 各タイミングでのUIテスト ◦ 毎リリース前 or 開発環境へのデプロイ時 ◦ 本番リリース時の本番でのUIテスト ◦ （PRごと） • さまざまなデバイス、ブラウザのサポート ◦ IEはなしw • （UI差分を検知できる） QAチームから • リグレッションテスト 求められている機能の実現 〜ヒアリング〜 DONE
20. 20 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
21. 21 Confidential - Do Not Share • TypeScript ◦ デベロッパーと同じ言語 • Node.jsのブラウザ自動化ツール ◦ カオスｗｗ 使ってもらうハードルを下げる 〜技術選定〜 DONE https://speakerdeck.com/hnz/hurausazi-don g-hua-turu-kaosumatuhufeng-stac2018-lt
22. 22 Confidential - Do Not Share 使ってもらうハードルを下げる 〜技術選定〜 DONE Cypress TestCafe WebdriverIO Selenium クロスブラウザ ❌ ✓ ✓ ✓ 書きやすさ ✓ ✓ ✓ ❌ セットアップ ✓ ✓ ❌ ❌ 周辺ツール ❌ ❌ ✓ ✓ 速度 ✓ ✓ ❌ ❌ 結果 次点 ロックイン カスタマイズ性 ◎ 枯れていて カスタマイズ可 能
23. 23 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
24. 24 Confidential - Do Not Share 見てもらうことを習慣化する 〜CI/CD〜 WIP • PRごとに（一部だけでも）UIテストを実施 • デプロイパイプラインにUIテストの組み込み 今後、起きうる問題 　 ケース数を増やしていく ⇒ テスト時間の増加 vs PRごとのテスト ヒント：Scaling Selenium to infinity using AWS Lambda
25. 25 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
26. 26 Confidential - Do Not Share 使ってもらう人を増やす 〜教育〜 WIP 地道に教育していく。
27. 27 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現
28. 28 Confidential - Do Not Share 通常のUIテストでは、 すべてのUI差分は検知することは現実的ではない。 ⇒ スクリーンショットを取り、差分検出 ＋α機能の実現 〜UI差分ツール〜 https://github.com/mojoaxel/ awesome-regression-testing WIP
29. 29 Confidential - Do Not Share ＋α機能の実現 〜UI差分ツール〜 できない できる データの初期化？ ほとんどのツールがOK • reg-suit • Percy • Vizwiz … Applitools が最適 WIP
30. 30 Confidential - Do Not Share ＋α機能の実現 〜UI差分ツール〜 できない できる データの初期化？ ほとんどのツールがOK • reg-suit • Percy • Vizwiz … Applitools が最適 WIP
31. 31 Confidential - Do Not Share Applitools 機能 • AIによる差分の抽出 • Strict, Content, Layout での差分方法 ＋α機能の実現 〜UI差分ツール〜 WIP
32. 32 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する 使ってもらう人を増やす 02 03 04 01 すべてできたら、目指している世界になれるかも！？ 05 ＋α機能の実現
33. 33 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
34. 34 Confidential - Do Not Share • Web、Appで品質、UIテスト戦略は異なる • WebはいまUIテストの自動化が始まったばかり • 今後に乞うご期待 まとめ