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

9168d92e156ef9d537d38f4a071e5c5e?s=47 AHA_oretama
February 15, 2019

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

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

9168d92e156ef9d537d38f4a071e5c5e?s=128

AHA_oretama

February 15, 2019
Tweet

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のブラウザ自動化ツール ◦ カオスww 使ってもらうハードルを下げる 〜技術選定〜 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テストの自動化が始まったばかり

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