Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
メルカリにおける UIテストのこれまでとこれから 〜 App & Web 〜 / The past and future of UI test in Mercari
AHA_oretama
February 15, 2019
Technology
2
51k
メルカリにおける 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
17k
UIテスト結果の可視化を進めよう! 〜Allure導入〜 / Visualize ui-test results by allure
ahaoretama
0
930
Other Decks in Technology
See All in Technology
2022年度新卒技術研修「DNS」講義
excitejp
PRO
0
350
ソフトウェアテスト 2022 / Software Testing 2022
ak1210
1
1.5k
Camp Digital 2022: tailored advice
kyliehavelock
0
140
#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します!
miu_crescent
0
110
PUTとPOSTどっち使う?
hankehly
0
180
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
satoryu
1
1.3k
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
110
JSAI 2022チュートリアル講演 AI哲学マップ / JSAI 2022 Tutorial "AI Philosophy Map"
ykiyota
0
390
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
moritamasami
2
990
2022年度新卒技術研修「 ソフトウェアテスト」講義
excitejp
PRO
0
340
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
cybozuinsideout
PRO
4
1.9k
suppress-ts-errors を使って TypeScriptの型チェックを漸進的に強化する / Introducing-suppress-ts-errors
kawamataryo
2
110
Featured
See All Featured
WebSockets: Embracing the real-time Web
robhawkes
57
5.1k
Happy Clients
brianwarren
89
5.6k
Design by the Numbers
sachag
271
17k
The World Runs on Bad Software
bkeepers
PRO
57
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Automating Front-end Workflow
addyosmani
1351
200k
The Art of Programming - Codeland 2020
erikaheidi
32
10k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
How STYLIGHT went responsive
nonsquared
85
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
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テストの自動化が始まったばかり
• 今後に乞うご期待 まとめ