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
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
590
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
大量配信システムにおけるSLOの実践:「見えない」信頼性をSLOで可視化
plaidtech
PRO
0
390
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Language of Interfaces
destraynor
158
25k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
It's Worth the Effort
3n
185
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
GitHub's CSS Performance
jonrohan
1031
460k
Bash Introduction
62gerente
613
210k
RailsConf 2023
tenderlove
30
1.1k
Designing for humans not robots
tammielis
253
25k
Building Adaptive Systems
keathley
43
2.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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テストの自動化が始まったばかり
• 今後に乞うご期待 まとめ