Multi-Browser Testing Strategy Map

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".

9168d92e156ef9d537d38f4a071e5c5e?s=128

AHA_oretama

July 20, 2019
Tweet

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実行 - 1ブラウザのみ ここを抜けるためには、 ・自動テストに知見のある人の協力 ・自動テストの専任の人のアサインが 必要なことが多い。 Start
  38. 38 Confidential - Do Not Share 機能テストを高速で実行する状態 代表例 - 1〜2ブラウザ

    - 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を見て

    ステージを進めていく 自分のプロジェクトに最適な マルチブラウザの自動テストを 見つけていく まとめ