Multi-Browser Testing Strategy Map

by AHA_oretama

Slide 1

Slide 1 text

1 Conﬁdential - Do Not Share タイトルをはるサブタイトル

Slide 2

Slide 2 text

2 Conﬁdential - 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   

Slide 3

Slide 3 text

3 Conﬁdential - Do Not Share いきなりですが、質問です。

Slide 4

Slide 4 text

4 Conﬁdential - Do Not Share マルチブラウザの自動テストをしている or したい方〜？

Slide 5

Slide 5 text

5 Conﬁdential - Do Not Share 伝えたいこと ● マルチブラウザの自動テストの必要性は高まっている ● まだまだマルチブラウザの自動テストは簡単ではない ● Multi-Browser Testing Strategy Mapを見てステージを進めていく ● 自分のプロジェクトに最適なマルチブラウザの自動テストを見つけていく

Slide 6

Slide 6 text

6 Conﬁdential - Do Not Share マルチブラウザの自動テスト最近の傾向アジェンダマルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01

Slide 7

Slide 7 text

7 Conﬁdential - Do Not Share マルチブラウザの自動テスト最近の傾向アジェンダマルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01

Slide 8

Slide 8 text

8 Conﬁdential - 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%

Slide 9

Slide 9 text

9 Conﬁdential - Do Not Share DevOps from: https://danashby.co.uk/2016/10/19/continuous-testing-in-devops/

Slide 10

Slide 10 text

10 Conﬁdential - Do Not Share マルチブラウザの自動テストマルチブラウザの自動テストが重要になってきている自動テスト

Slide 11

Slide 11 text

11 Conﬁdential - Do Not Share W3C WebDriver from: https://www.w3.org/TR/webdriver1/

Slide 12

Slide 12 text

12 Conﬁdential - Do Not Share Safari in macOS supports W3C from: https://webkit.org/blog/6900/webdriver-support-in-safari-10/

Slide 13

Slide 13 text

13 Conﬁdential - Do Not Share Microsoft Edge supports W3C from:https://blogs.windows.com/msedgedev/2018/06/14/webdriver-w3c-recommenda tion-feature-on-demand/

Slide 14

Slide 14 text

14 Conﬁdential - Do Not Share Safari in iOS supports W3C from: https://webkit.org/blog/9395/webdriver-is-coming-to-safari-in-ios-13/

Slide 15

Slide 15 text

15 Conﬁdential - Do Not Share Internet Explorer not support W3C from: https://www.seleniumhq.org/download/

Slide 16

Slide 16 text

16 Conﬁdential - Do Not Share 今回の対象ブラウザ

Slide 17

Slide 17 text

17 Conﬁdential - Do Not Share ● マルチブラウザの自動テストの必要性は高まっている ● W3Cで標準化されて実装も簡易になってきているここまでのまとめ

Slide 18

Slide 18 text

18 Conﬁdential - Do Not Share マルチブラウザのテストは簡単…？

Slide 19

Slide 19 text

19 Conﬁdential - Do Not Share まだまだ大変というのが現状です！

Slide 20

Slide 20 text

20 Conﬁdential - Do Not Share マルチブラウザの自動テスト最近の傾向アジェンダマルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01

Slide 21

Slide 21 text

21 Conﬁdential - Do Not Share ブラウザの独自実装問題点①

Slide 22

Slide 22 text

22 Conﬁdential - Do Not Share Safariでは、”Get Element Text”の仕様を満たしていない ☓ HTMLタグを除いたテキストが取得される ○ 表示されているままのテキスト W3Cに準拠していないケース

test
text

⇒ testtext ⇒ test\ntext

Slide 23

Slide 23 text

23 Conﬁdential - Do Not Share W3Cの判断が分かれるケース ⇒ クリック可 ⇒ エラー $(‘select[name=”year”].option[value=”2000”]’).click()

Slide 24

Slide 24 text

24 Conﬁdential - Do Not Share ● W3Cで標準化されているが、準拠していないケース、仕様の判断が分かれるケースなどブラウザ独自の対応が必要になってくる問題点① ● 右にいくほど実装難易度はあがる。 ● 対応ブラウザを増やすほど難易度はあがる

Slide 25

Slide 25 text

25 Conﬁdential - Do Not Share OS × Browser 問題点②

Slide 26

Slide 26 text

26 Conﬁdential - Do Not Share デスクトップ

Slide 27

Slide 27 text

27 Conﬁdential - Do Not Share デスクトップ OSによる差異はそこまでない

Slide 28

Slide 28 text

28 Conﬁdential - Do Not Share デスクトップ特定のOSでしか動かない ⇒ 開発環境、CIへの影響

Slide 29

Slide 29 text

29 Conﬁdential - Do Not Share モバイル Mobile Emulate etc or

Slide 30

Slide 30 text

30 Conﬁdential - Do Not Share モバイル Mobile Emulate etc or Mobile Emulateならデスクトップと同じ構成でできる

Slide 31

Slide 31 text

31 Conﬁdential - Do Not Share モバイル Mobile Emulate etc or 実機の管理 or Emulator/Simulatorの準備 → 開発環境、CI環境への影響

Slide 32

Slide 32 text

32 Conﬁdential - Do Not Share ● デスクトップ、モバイルのすべてに対応すると組み合わせが非常に多くなる ● 特定のOSでしか動かないブラウザがあるため開発環境、CI環境の構築・メンテナンスが難しくなる問題点②

Slide 33

Slide 33 text

33 Conﬁdential - Do Not Share ● デスクトップ、モバイルのすべてに対応すると組み合わせが非常に多くなる ● W3Cで標準化されているが、まだまだブラウザ独自の対応が必要 ● 特定のOSでしか動かないブラウザがあるため開発環境、CI環境の構築・メンテナンスが難しいここまでのまとめ

Slide 34

Slide 34 text

34 Conﬁdential - Do Not Share どうしていくのがよいのか？

Slide 35

Slide 35 text

35 Conﬁdential - Do Not Share マルチブラウザの自動テスト最近の傾向アジェンダマルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01

Slide 36

Slide 36 text

36 Conﬁdential - Do Not Share Multi-Browser Testing Strategy Map

Slide 37

Slide 37 text

37 Conﬁdential - Do Not Share UIテストを始めたばかり。初心者がとどまりやすい状態。代表例 - ローカルCI実行 - １ブラウザのみここを抜けるためには、・自動テストに知見のある人の協力・自動テストの専任の人のアサインが必要なことが多い。 Start

Slide 38

Slide 38 text

38 Conﬁdential - Do Not Share 機能テストを高速で実行する状態代表例 - 1〜２ブラウザ - Selenium Grid on Cloud - Grid数を増やせば時間が減る。時間が減るほど実行タイミングを増やしていく。 ● QA環境へのデプロイ ● プルリクエスト Functional Testing

Slide 39

Slide 39 text

39 Conﬁdential - Do Not Share 構築について from: https://tech.mercari.com/entry/2019/04/16/060000

Slide 40

Slide 40 text

40 Conﬁdential - Do Not Share マルチブラウザで高速に実行するメンテナンスコスト、SaaS利用料が高い。代表例 - Sauce Labs - マルチブラウザメンテナンスコスト、利用料、ブラウザの必要性を比較しつつ必要性に合わせてブラウザを増やしていく。 Full DevOps

Slide 41

Slide 41 text

41 Conﬁdential - Do Not Share - Sauce Labs - BrowserStack - Aerokube - etc 同時実行数で決まるため、高速化×ブラウザ×OSをすると、けっこうな利用料がかかるアップデートや保守は自動でやってくれる月単位なのでいきなり使うとコスパは悪いイメージ Browser Testing SaaS

Slide 42

Slide 42 text

42 Conﬁdential - Do Not Share 時間がかかってもマルチブラウザで品質を保証したい場合のみ代表例 - Local Test in Jenkins Slave - ブラウザは複数リリース速度捨ててでも品質を重要視しているケース Non DevOps

Slide 43

Slide 43 text

43 Conﬁdential - Do Not Share Mercariでは？

Slide 44

Slide 44 text

44 Conﬁdential - 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では？

Slide 45

Slide 45 text

45 Conﬁdential - Do Not Share マルチブラウザの自動テスト最近の傾向アジェンダマルチブラウザの自動テストの難しさ Multi-Browser Testing Strategy Map まとめ 02 03 04 01

Slide 46

Slide 46 text

46 Conﬁdential - Do Not Share ● マルチブラウザの自動テストの必要性は高まっている ● まだまだマルチブラウザの自動テストは簡単ではないまとめ

Slide 47

Slide 47 text

47 Conﬁdential - Do Not Share Multi-Browser Testing Strategy Mapを見てステージを進めていく自分のプロジェクトに最適なマルチブラウザの自動テストを見つけていくまとめ