Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
メルカリにおける UIテストのこれまでとこれから 〜 App & Web 〜 / The p...
Search
AHA_oretama
February 15, 2019
Technology
2
56k
メルカリにおける UIテストのこれまでとこれから 〜 App & Web 〜 / The past and future of UI test in Mercari
メルカリという大規模プロダクトで実践しているテスト自動化について、WEBとAPPの品質や技術スタックの差異をまとめながら、メルカリのUIテストのこれまでとこれから、についてお話します。
AHA_oretama
February 15, 2019
Tweet
Share
More Decks by AHA_oretama
See All by AHA_oretama
Multi-Browser Testing Strategy Map
ahaoretama
1
19k
UIテスト結果の可視化を進めよう! 〜Allure導入〜 / Visualize ui-test results by allure
ahaoretama
0
1.5k
Other Decks in Technology
See All in Technology
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
49
19k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
300
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
怖くない!はじめてのClaude Code
shinya337
0
400
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
360
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
BBQ
matthewcrist
89
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Language of Interfaces
destraynor
158
25k
Writing Fast Ruby
sferik
628
62k
Navigating Team Friction
lara
187
15k
Music & Morning Musume
bryan
46
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
1 Confidential - Do Not Share メルカリにおける UIテストのこれまでとこれから 〜 App
& Web 〜 メルカリ AQA 関根 康史 おれたま@AHA_oretama
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 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~
App & Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
4 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~
App & Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
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 Confidential - Do Not Share なぜAppのUIテストだったか? メルカリはAppメイン ⇒ビジネスに合わせた UIテスト戦略
7 Confidential - Do Not Share Web UIテスト自動化へ • Webリアーキテクチャ
• Webの重要度が高まる ⇒ビジネスに合わせた UIテスト戦略 https://speakerdeck.com/mercari/mtc2018-web-application-as-a-microservice
8 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~
App & Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
9 Confidential - Do Not Share リリースサイクル AppとWebの品質 切り戻し可 モニタリングも品質
バージョンが残る (強制アプデは望ましくない)
10 Confidential - Do Not Share リリースサイクル UIテストのタイミング UIテスト UIテスト
UIテスト UIテスト
11 Confidential - Do Not Share ※私見を多分に含みます メルカリにおけるUIテストの立ち位置 App QAのためのUIテスト
Web デベロッパー寄りのUIテスト
12 Confidential - Do Not Share • (Automation&QAの)全員自動化 ◦ Turnip
UIテスト戦略の違い 〜App〜 https://speakerdeck.com/tadashi0713/merukarifalsetesutozi-dong-hua-zhan-lue
13 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い 〜Web〜
14 Confidential - Do Not Share 目指している世界 UIテスト戦略の違い 〜Web〜
15 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~
App & Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
16 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
17 Confidential - Do Not Share ※ここからはWeb UIテストのいまとこれからの話です。 模索中の話も含みます。 メルカリにおけるWeb
UIテストのいまとこれから DONE WIP
18 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
19 Confidential - Do Not Share Webチームから • (ある程度)マニュアルQAなしでリリースできる •
各タイミングでのUIテスト ◦ 毎リリース前 or 開発環境へのデプロイ時 ◦ 本番リリース時の本番でのUIテスト ◦ (PRごと) • さまざまなデバイス、ブラウザのサポート ◦ IEはなしw • (UI差分を検知できる) QAチームから • リグレッションテスト 求められている機能の実現 〜ヒアリング〜 DONE
20 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
21 Confidential - Do Not Share • TypeScript ◦ デベロッパーと同じ言語
• Node.jsのブラウザ自動化ツール ◦ カオスww 使ってもらうハードルを下げる 〜技術選定〜 DONE https://speakerdeck.com/hnz/hurausazi-don g-hua-turu-kaosumatuhufeng-stac2018-lt
22 Confidential - Do Not Share 使ってもらうハードルを下げる 〜技術選定〜 DONE Cypress
TestCafe WebdriverIO Selenium クロスブラウザ ❌ ✓ ✓ ✓ 書きやすさ ✓ ✓ ✓ ❌ セットアップ ✓ ✓ ❌ ❌ 周辺ツール ❌ ❌ ✓ ✓ 速度 ✓ ✓ ❌ ❌ 結果 次点 ロックイン カスタマイズ性 ◎ 枯れていて カスタマイズ可 能
23 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
24 Confidential - Do Not Share 見てもらうことを習慣化する 〜CI/CD〜 WIP •
PRごとに(一部だけでも)UIテストを実施 • デプロイパイプラインにUIテストの組み込み 今後、起きうる問題 ケース数を増やしていく ⇒ テスト時間の増加 vs PRごとのテスト ヒント:Scaling Selenium to infinity using AWS Lambda
25 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
26 Confidential - Do Not Share 使ってもらう人を増やす 〜教育〜 WIP 地道に教育していく。
27 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 デベロッパーにUIテストを自分ごととして捉えてもらうために 05 +α機能の実現
28 Confidential - Do Not Share 通常のUIテストでは、 すべてのUI差分は検知することは現実的ではない。 ⇒ スクリーンショットを取り、差分検出
+α機能の実現 〜UI差分ツール〜 https://github.com/mojoaxel/ awesome-regression-testing WIP
29 Confidential - Do Not Share +α機能の実現 〜UI差分ツール〜 できない できる
データの初期化? ほとんどのツールがOK • reg-suit • Percy • Vizwiz … Applitools が最適 WIP
30 Confidential - Do Not Share +α機能の実現 〜UI差分ツール〜 できない できる
データの初期化? ほとんどのツールがOK • reg-suit • Percy • Vizwiz … Applitools が最適 WIP
31 Confidential - Do Not Share Applitools 機能 • AIによる差分の抽出
• Strict, Content, Layout での差分方法 +α機能の実現 〜UI差分ツール〜 WIP
32 Confidential - Do Not Share 求められている機能の実現 目指している世界のために 使ってもらうハードルを下げる 見てもらうことを習慣化する
使ってもらう人を増やす 02 03 04 01 すべてできたら、目指している世界になれるかも!? 05 +α機能の実現
33 Confidential - Do Not Share メルカリにおけるUIテストのこれまでといま アジェンダ 品質から見るUIテスト戦略 ~
App & Web ~ メルカリにおけるWeb UIテストのいまとこれから まとめ 02 03 04 01
34 Confidential - Do Not Share • Web、Appで品質、UIテスト戦略は異なる • WebはいまUIテストの自動化が始まったばかり
• 今後に乞うご期待 まとめ