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

by AHA_oretama

Slide 1

Slide 1 text

1 Confidential - Do Not Share メルカリにおける UIテストのこれまでとこれから〜 App ＆ Web 〜メルカリ AQA 関根康史おれたま@AHA_oretama

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといまアジェンダ品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれからまとめ 02 03 04 01

Slide 4

Slide 4 text

4 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといまアジェンダ品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれからまとめ 02 03 04 01

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 Confidential - Do Not Share なぜAppのUIテストだったか？メルカリはAppメイン ⇒ビジネスに合わせた　UIテスト戦略

Slide 7

Slide 7 text

7 Confidential - Do Not Share Web UIテスト自動化へ ● Webリアーキテクチャ ● Webの重要度が高まる ⇒ビジネスに合わせた　UIテスト戦略 https://speakerdeck.com/mercari/mtc2018-web-application-as-a-microservice

Slide 8

Slide 8 text

8 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといまアジェンダ品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれからまとめ 02 03 04 01

Slide 9

Slide 9 text

9 Confidential - Do Not Share リリースサイクル AppとWebの品質切り戻し可モニタリングも品質バージョンが残る（強制アプデは望ましくない）

Slide 10

Slide 10 text

10 Confidential - Do Not Share リリースサイクル UIテストのタイミング UIテスト UIテスト UIテスト UIテスト

Slide 11

Slide 11 text

11 Confidential - Do Not Share ※私見を多分に含みますメルカリにおけるUIテストの立ち位置 App QAのためのUIテスト Web デベロッパー寄りのUIテスト

Slide 12

Slide 12 text

12 Confidential - Do Not Share ● （Automation＆QAの）全員自動化 ○ Turnip UIテスト戦略の違い〜App〜 https://speakerdeck.com/tadashi0713/merukarifalsetesutozi-dong-hua-zhan-lue

Slide 13

Slide 13 text

13 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い〜Web〜

Slide 14

Slide 14 text

14 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い〜Web〜

Slide 15

Slide 15 text

15 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといまアジェンダ品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれからまとめ 02 03 04 01

Slide 16

Slide 16 text

16 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 17

Slide 17 text

17 Confidential - Do Not Share ※ここからはWeb UIテストのいまとこれからの話です。　模索中の話も含みます。メルカリにおけるWeb UIテストのいまとこれから DONE WIP

Slide 18

Slide 18 text

18 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 19

Slide 19 text

19 Confidential - Do Not Share Webチームから ● （ある程度）マニュアルQAなしでリリースできる ● 各タイミングでのUIテスト ○ 毎リリース前 or 開発環境へのデプロイ時 ○ 本番リリース時の本番でのUIテスト ○ （PRごと） ● さまざまなデバイス、ブラウザのサポート ○ IEはなしw ● （UI差分を検知できる） QAチームから ● リグレッションテスト求められている機能の実現〜ヒアリング〜 DONE

Slide 20

Slide 20 text

20 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 21

Slide 21 text

21 Confidential - Do Not Share ● TypeScript ○ デベロッパーと同じ言語 ● Node.jsのブラウザ自動化ツール ○ カオスｗｗ使ってもらうハードルを下げる〜技術選定〜 DONE https://speakerdeck.com/hnz/hurausazi-don g-hua-turu-kaosumatuhufeng-stac2018-lt

Slide 22

Slide 22 text

22 Confidential - Do Not Share 使ってもらうハードルを下げる〜技術選定〜 DONE Cypress TestCafe WebdriverIO Selenium クロスブラウザ ❌ ✓ ✓ ✓ 書きやすさ ✓ ✓ ✓ ❌ セットアップ ✓ ✓ ❌ ❌ 周辺ツール ❌ ❌ ✓ ✓ 速度 ✓ ✓ ❌ ❌ 結果次点ロックインカスタマイズ性 ◎ 枯れていてカスタマイズ可能

Slide 23

Slide 23 text

23 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 24

Slide 24 text

24 Confidential - Do Not Share 見てもらうことを習慣化する〜CI/CD〜 WIP ● PRごとに（一部だけでも）UIテストを実施 ● デプロイパイプラインにUIテストの組み込み今後、起きうる問題　ケース数を増やしていく ⇒ テスト時間の増加 vs PRごとのテストヒント：Scaling Selenium to infinity using AWS Lambda

Slide 25

Slide 25 text

25 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 26

Slide 26 text

26 Confidential - Do Not Share 使ってもらう人を増やす〜教育〜 WIP 地道に教育していく。

Slide 27

Slide 27 text

27 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 ＋α機能の実現

Slide 28

Slide 28 text

28 Confidential - Do Not Share 通常のUIテストでは、すべてのUI差分は検知することは現実的ではない。 ⇒ スクリーンショットを取り、差分検出＋α機能の実現〜UI差分ツール〜 https://github.com/mojoaxel/ awesome-regression-testing WIP

Slide 29

Slide 29 text

29 Confidential - Do Not Share ＋α機能の実現〜UI差分ツール〜できないできるデータの初期化？ほとんどのツールがOK ● reg-suit ● Percy ● Vizwiz … Applitools が最適 WIP

Slide 30

Slide 30 text

30 Confidential - Do Not Share ＋α機能の実現〜UI差分ツール〜できないできるデータの初期化？ほとんどのツールがOK ● reg-suit ● Percy ● Vizwiz … Applitools が最適 WIP

Slide 31

Slide 31 text

31 Confidential - Do Not Share Applitools 機能 ● AIによる差分の抽出 ● Strict, Content, Layout での差分方法＋α機能の実現〜UI差分ツール〜 WIP

Slide 32

Slide 32 text

32 Confidential - Do Not Share 求められている機能の実現目指している世界のために使ってもらうハードルを下げる見てもらうことを習慣化する使ってもらう人を増やす 02 03 04 01 すべてできたら、目指している世界になれるかも！？ 05 ＋α機能の実現

Slide 33

Slide 33 text

33 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといまアジェンダ品質から見るUIテスト戦略 ~ App ＆ Web ~ メルカリにおけるWeb UIテストのいまとこれからまとめ 02 03 04 01

Slide 34

Slide 34 text

34 Confidential - Do Not Share ● Web、Appで品質、UIテスト戦略は異なる ● WebはいまUIテストの自動化が始まったばかり ● 今後に乞うご期待まとめ