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
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
1
280
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
2
1.1k
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.4k
Agile TPIを活用した品質改善事例
tomasagi
0
200
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
130
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
1.2k
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1k
AIが変えるソフトウェア開発__未来のアジャイルチームとは__.pdf
buchirei
0
380
PostgreSQL Unconference #52 pg_tde
nori_shinoda
0
170
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.8k
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
200
チームの性質によって変わる ADR との向き合い方と、生成 AI 時代のこれから / How to deal with ADR depends on the characteristics of the team
mh4gf
4
310
Featured
See All Featured
A better future with KSS
kneath
238
17k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Code Reviewing Like a Champion
maltzj
521
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Git: the NoSQL Database
bkeepers
PRO
429
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
460
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テストの自動化が始まったばかり
• 今後に乞うご期待 まとめ