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
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
150
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
16k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
What’s new in Android development tools
yanzm
0
310
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
300
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
160
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
690
Bash Introduction
62gerente
613
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
GraphQLとの向き合い方2022年版
quramy
49
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Invisible Side of Design
smashingmag
301
51k
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テストの自動化が始まったばかり
• 今後に乞うご期待 まとめ