Multi-Browser Testing Strategy Map

In DevOps, test is required to be automated. multi-browser testing is also so.
However, multi-browser testing is not easy now.

To guide you to multi-browser testing, I create "Multi-Browser Testing Strategy Map".
You should grow your multi-browser testing and find your best position in "Multi-Browser Testing Strategy Map".

Transcript

1. 1 Confidential - Do Not Share タイトルをはる サブタイトル
2. 2 Confidential - Do Not Share Automation＆QA Group（通称AQA）
 • 2018/8にMercariジョイン
 • テスト自動化
 ◦ Appium, WebdriverIO, Espresso…
 ◦ CI/CD
 
 Links
 • https://twitter.com/AHA_oretama
 • https://github.com/aha-oretama
 • https://www.slideshare.net/aha_oretama
 • https://speakerdeck.com/ahaoretama
 関根 康史
 おれたま@AHA_oretama
 

3. 3 Confidential - Do Not Share いきなりですが、質問です。
4. 4 Confidential - Do Not Share マルチブラウザの自動テストを している or したい方〜？
5. 5 Confidential - Do Not Share 伝えたいこと • マルチブラウザの自動テストの必要性は高まっている • まだまだマルチブラウザの自動テストは簡単ではない • Multi-Browser Testing Strategy Mapを見て ステージを進めていく • 自分のプロジェクトに最適なマルチブラウザの 自動テストを見つけていく
6. 6 Confidential - Do Not Share マルチブラウザの自動テスト 最近の傾向 アジェンダ マルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01
7. 7 Confidential - Do Not Share マルチブラウザの自動テスト 最近の傾向 アジェンダ マルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01
8. 8 Confidential - Do Not Share ブラウザシェア from: http://gs.statcounter.com/ Chrome Safari IE Firefox Edge Samsung Internet Android Opera UC Browser Other 45% 33% 8.5% 5.9% 4.5% 1.1% 0.7% 0.6% 0.3% 1.1%
9. 9 Confidential - Do Not Share DevOps from: https://danashby.co.uk/2016/10/19/continuous-testing-in-devops/
10. 10 Confidential - Do Not Share マルチブラウザの自動テスト マルチブラウザの自動テストが 重要になってきている 自動 テスト
11. 11 Confidential - Do Not Share W3C WebDriver from: https://www.w3.org/TR/webdriver1/
12. 12 Confidential - Do Not Share Safari in macOS supports W3C from: https://webkit.org/blog/6900/webdriver-support-in-safari-10/
13. 13 Confidential - Do Not Share Microsoft Edge supports W3C from:https://blogs.windows.com/msedgedev/2018/06/14/webdriver-w3c-recommenda tion-feature-on-demand/
14. 14 Confidential - Do Not Share Safari in iOS supports W3C from: https://webkit.org/blog/9395/webdriver-is-coming-to-safari-in-ios-13/
15. 15 Confidential - Do Not Share Internet Explorer not support W3C from: https://www.seleniumhq.org/download/
16. 16 Confidential - Do Not Share 今回の対象ブラウザ
17. 17 Confidential - Do Not Share • マルチブラウザの自動テストの必要性は高まっている • W3Cで標準化されて実装も簡易になってきている ここまでのまとめ
18. 18 Confidential - Do Not Share マルチブラウザのテストは簡単…？
19. 19 Confidential - Do Not Share まだまだ大変というのが現状です！
20. 20 Confidential - Do Not Share マルチブラウザの自動テスト 最近の傾向 アジェンダ マルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01
21. 21 Confidential - Do Not Share ブラウザの独自実装 問題点①
22. 22 Confidential - Do Not Share Safariでは、”Get Element Text”の仕様を満たしていない ☓ HTMLタグを除いたテキストが取得される ◦ 表示されているままのテキスト W3Cに準拠していないケース <p>test<br>text</p> ⇒ testtext ⇒ test\ntext
23. 23 Confidential - Do Not Share W3Cの判断が分かれるケース ⇒ クリック可 ⇒ エラー $(‘select[name=”year”].option[value=”2000”]’).click()
24. 24 Confidential - Do Not Share • W3Cで標準化されているが、準拠していないケース、仕様の判断が 分かれるケースなどブラウザ独自の対応が必要になってくる 問題点① • 右にいくほど実装難易度はあがる。 • 対応ブラウザを増やすほど難易度はあがる
25. 25 Confidential - Do Not Share OS × Browser 問題点②
26. 26 Confidential - Do Not Share デスクトップ
27. 27 Confidential - Do Not Share デスクトップ OSによる差異はそこまでない
28. 28 Confidential - Do Not Share デスクトップ 特定のOSでしか動かない ⇒ 開発環境、CIへの影響
29. 29 Confidential - Do Not Share モバイル Mobile Emulate etc or
30. 30 Confidential - Do Not Share モバイル Mobile Emulate etc or Mobile Emulateなら デスクトップと同じ構成でできる
31. 31 Confidential - Do Not Share モバイル Mobile Emulate etc or 実機の管理 or Emulator/Simulatorの準備 → 開発環境、CI環境への影響
32. 32 Confidential - Do Not Share • デスクトップ、モバイルのすべてに対応すると組み合わせが 非常に多くなる • 特定のOSでしか動かないブラウザがあるため 開発環境、CI環境の構築・メンテナンスが難しくなる 問題点②
33. 33 Confidential - Do Not Share • デスクトップ、モバイルのすべてに対応すると組み合わせが 非常に多くなる • W3Cで標準化されているが、まだまだブラウザ独自の対応が必要 • 特定のOSでしか動かないブラウザがあるため 開発環境、CI環境の構築・メンテナンスが難しい ここまでのまとめ
34. 34 Confidential - Do Not Share どうしていくのがよいのか？
35. 35 Confidential - Do Not Share マルチブラウザの自動テスト 最近の傾向 アジェンダ マルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01
36. 36 Confidential - Do Not Share Multi-Browser Testing Strategy Map
37. 37 Confidential - Do Not Share UIテストを始めたばかり。 初心者がとどまりやすい状態。 代表例 - ローカルCI実行 - １ブラウザのみ ここを抜けるためには、 ・自動テストに知見のある人の協力 ・自動テストの専任の人のアサインが 必要なことが多い。 Start
38. 38 Confidential - Do Not Share 機能テストを高速で実行する状態 代表例 - 1〜２ブラウザ - Selenium Grid on Cloud - Grid数を増やせば時間が減る。 時間が減るほど 実行タイミングを増やしていく。 • QA環境へのデプロイ • プルリクエスト Functional Testing
39. 39 Confidential - Do Not Share 構築について from: https://tech.mercari.com/entry/2019/04/16/060000
40. 40 Confidential - Do Not Share マルチブラウザで高速に実行する メンテナンスコスト、SaaS利用料が高 い。 代表例 - Sauce Labs - マルチブラウザ メンテナンスコスト、利用料、 ブラウザの必要性を比較しつつ 必要性に合わせてブラウザを 増やしていく。 Full DevOps
41. 41 Confidential - Do Not Share - Sauce Labs - BrowserStack - Aerokube - etc 同時実行数で決まるため、高速化×ブラウザ×OSをすると、 けっこうな利用料がかかる アップデートや保守は自動でやってくれる 月単位なのでいきなり使うとコスパは悪いイメージ Browser Testing SaaS
42. 42 Confidential - Do Not Share 時間がかかっても マルチブラウザで品質を保証したい場 合のみ 代表例 - Local Test in Jenkins Slave - ブラウザは複数 リリース速度捨ててでも 品質を重要視しているケース Non DevOps
43. 43 Confidential - Do Not Share Mercariでは？
44. 44 Confidential - Do Not Share 以下のタイミングでブラウザの自動テスト を実施中 or 検討中 - プルリクエスト - Functional Testing - Chrome, Chrome Mobile Emulate - テストケース絞る or APIをモック化 - QA環境デプロイ - Functional Testing - Chrome, Firefox, Chrome Mobile Emulate - 全機能テスト - 本番リリース時 - 上記に加えてテストケースをある程度絞り Safari、Safari Mobile、EdgeをSaaSで実行 Mercariでは？
45. 45 Confidential - Do Not Share マルチブラウザの自動テスト 最近の傾向 アジェンダ マルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01
46. 46 Confidential - Do Not Share • マルチブラウザの自動テストの必要性は高まっている • まだまだマルチブラウザの自動テストは簡単ではない まとめ
47. 47 Confidential - Do Not Share Multi-Browser Testing Strategy Mapを見て ステージを進めていく 自分のプロジェクトに最適な マルチブラウザの自動テストを 見つけていく まとめ