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

Transcript

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テストの自動化が始まったばかり

    • 今後に乞うご期待 まとめ