Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PyConJP 2015 スライド資料

6dbe360915689b269ab4fa510743762b?s=47 英 谷口
October 14, 2015

PyConJP 2015 スライド資料

『なぜWeb画面自動テストはうまく行かないのか』で使用したスライドを再度共有しました。

動画つきはこちら
http://togetter.com/li/884827

https://docs.google.com/presentation/d/1cWX8fyHUl1rqhZf3eIJHu0JvyYxJLQfkBP6CTMP3sYc/edit#slide=id.p

6dbe360915689b269ab4fa510743762b?s=128

英 谷口

October 14, 2015
Tweet

Transcript

  1. なぜWeb画面自動テストはうまく行かないのか シルバーエッグ・テクノロジー株式会社 エンジニア 谷口 英 PyCon JP 2015/10/10・11

  2. 自己紹介

  3. 谷口 英 (たにぐち あきら)

  4. 所属

  5. シルバーエッグテクノロジー (リアルタイム レコメンド)

  6. None
  7. やってること

  8. 品質安定(Selenium)

  9. 効果解析(Big Query)

  10. いろんなバッチ

  11. LinkedIn https://jp.linkedin.com/pub/英-谷口/90/8a9/944

  12. Google+ ブログ名:ググれカス http://gugurekasu.blogspot.jp/

  13. 悩み

  14. ソースがJavaっぽい

  15. 事前確認

  16. Pythonの話は少ない

  17. 本題:テストの話

  18. テスト好き?

  19. テストって時間かかる

  20. 1回だけならまだしも、、

  21. モジュール入れ替える たびに同じようなことを

  22. どうにかしたい

  23. そんなあなたに

  24. Selenium

  25. Seleniumって何?

  26. 自動でブラウザを 動かせます

  27. 1系:JavaScriptベース

  28. 2系:WebDriverベース

  29. 3系:?

  30. 最新のものを使おう

  31. クロスブラウザ対応

  32. None
  33. マルチプラットフォーム対応

  34. Selenium Grid

  35. Appium

  36. マウス・キーボード 動作再現可能

  37. JavaScript実行可能

  38. じゃあ余裕でしょ

  39. そうでもない

  40. Web画面自動テストは うまくいかないことが多い

  41. 特に『運用』

  42. なぜだ

  43. 結論:コストが高い

  44. 主な理由は4つ

  45. その1:テストケース 記述コスト

  46. if __name__ == '__main__': driver = webdriver.Chrome(executable_path='C:\\tmp\\chromedriver.exe') driver.get('http://store.example.co.jp/') #choromeでECサイトを開く wait_load('http://store.example.co.jp/')

    #ページがロードするまで待機 btn_element = driver.find_element_by_id('target_btn_id') #商品詳細ページを開くボタンをクリックして btn_element.click() wait_load('http://store.example.co.jp/detail_page'') #ページがロードするまで待機 assert driver.title == u'詳細ページ', 'page title is different' #タイトルが期待値でなかった場合、エラー def wait_load(url): while True: #ページがロードするまで待機 if driver.current_url == url: break time.sleep(2)
  47. プログラムを書く必要がある

  48. ・評価担当者/ デザイナー に敷居が高い

  49. コード自体の保守コスト

  50. HTML変わったら どうすんの?

  51. その2:マルチブラウザ 対応コスト

  52. ブラウザごとに違う 記述方法

  53. Safariは「戻れ」ない

  54. IEは「クリック」 できない

  55. スマフォのブラウザは 最大化できない

  56. バージョン間の動作差異

  57. というのを 意識せざるを得ない

  58. いずれなくなるらしいけど

  59. その3:パラメータ 変更によるコスト

  60. シチュエーション 苗字と名前を入力する フォーム

  61. 「山田」 「太郎」 と入力

  62. 「山田」 「太郎」 と入力

  63. 「山田」 「太郎」 を確認

  64. 「勘解由小路」 「江川富士一二三四五左衛門助太郎」 を入力

  65. 「勘解由小路」 「江川富士一二三四五左衛門助太郎」 を確認

  66. 同じような処理を 幾度となく・・

  67. 仕様変更でミドルネーム まで管理することに。。

  68. テストケースごちゃごちゃ

  69. その4:環境を 用意するコスト

  70. 実際にテストするブラウザ

  71. Internat Explorer (Ver8~11)

  72. Chrome

  73. FireFox

  74. Safari

  75. Android Browser

  76. Edge

  77. それにOS

  78. Windows 7 のIE 11 Windows 8 のIE 11 Windows 10

    のIE 11
  79. iOS7のSafari iOS8のSafari YosemiteのSafari

  80. Android 4.4のブラウザ Android 4.5のブラウザ Android 5.0のブラウザ

  81. Android 5.0のGalaxy Android 5.0のARROWS Android 5.0のXperia

  82. そんなのいちいち 用意してたら

  83. こ う な る

  84. じゃあどうするの?

  85. 解決策の一例

  86. Seleniumをラッピングした 自作ツールと

  87. ブラウザテスト 環境提供サービス を利用する

  88. ブラウザテスト環境提供 サービス ツール全体イメージ テストケースファ イル パラメータファイ ル ラッピングツール Selenium エディタ

    作業者 Selenium Grid Appium EC サイト
  89. テストケースファイル

  90. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 『どこの何にどうする』とい う実際の動作を 設定しているファイル
  91. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 作業者にはコードを 記述させない 1クッション 置くイメージ
  92. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 詳細なテスト内容を記述 せず、 テストしたい項目を 記述する テストケース記述コストを解決
  93. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 各コマンドを ラッピングすることで 作業者はブラウザ、 プラットフォームの 動作差異を意識せずに 設定できる マルチブラウザ対応コストを解決
  94. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } パラメータファイルと 組み合わせ、 少ない記述でパラメータを 変更し、 繰り返しテストを 実行することが可能 パラメータ変更によるコストを解決
  95. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } $から始まる文字列は パラメータファイルの 設定値にリンク
  96. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 参照するパラメータ ファイルを変更する ことにより、 他の画面のケースにも 流用可能
  97. { “actions”: [ { “action”: “loop_start”, “key”: “item_count”, “parameter_file”: “./param.csv”

    } { “action”: “get” “url”: “${item_count.url}” } { “action”: “check_item_count” “url”: “${item_count.count}” } { “action”: “loop_end”, “parameter_file”: “./param.csv” } ] } 形式はパーサがある XMLやHTML、 JSONがお勧め
  98. パラメータファイル

  99. “url”,”count” “http://hogehoge.co.jp/shop/goods.html?id=12345”,”5” “http://hogehoge.co.jp/shop/goods.html?id=67890”,”6” “http://hogehoge.co.jp/shop/goods.html?id=55555”,”7” テストケースファイルで使用するパラメータを設定する

  100. “url”,”count” “http://hogehoge.co.jp/shop/goods.html?id=12345”,”5” “http://hogehoge.co.jp/shop/goods.html?id=67890”,”6” “http://hogehoge.co.jp/shop/goods.html?id=55555”,”7” テストケースを増やしたいときは、 テストケースファイルではなく、 パラメータファイルを修正する

  101. 自作ツール

  102. 動作

  103. テストケースファイルを 読み取って、テストする

  104. パラメータファイルの 行数だけ 同じテストを繰り返す

  105. ブラウザテスト環境 提供サービスにあわせた 形式でSeleniumを起動する 環境を用意するコストを解決

  106. ブラウザ環境提供 サービス

  107. 《条件》 ・Seleniumと親和性が高い ・自動テストに対応している

  108. 結論

  109. SauceLabs or BrowserStack

  110. 理由(2015年9月現在)

  111. 安定して動作する

  112. 最新ブラウザに 対応している

  113. ブラウザの種類も豊富

  114. テストのステータスを 取得するAPI

  115. 個人的には SauceLabs

  116. ブラウザテスト環境 提供サービス 実装例

  117. driver = webdriver.Chrome(executable_path='C:\\tmp\\chromedriver.exe') driver.get('http://store.example.co.jp/') #choromeでサイトを開く desired_cap = { 'browserName':'Chrome', 'platform':'Windows

    7', 'version':'45.0', 'chromedriverVersion':'2.15' } driver = webdriver.Remote( command_executor='http://${user}:${pass}@ondemand.saucelabs.com:80/wd/hub', desired_capabilities=desired_cap ) driver.get('http://store.example.co.jp/') #choromeでサイトを開く
  118. 既存のテストケースが そのまま使える

  119. こだわったところ

  120. 作業者が楽になるように (テストケースをできるだけ 記述させない)

  121. 目的:運用コストの削減 (コストメリットの増加)

  122. 苦労したとこ

  123. 1.動作の安定性 (ネットワーク?)

  124. 2.自社製品じゃない

  125. 今後の課題

  126. 1.テストケースファイルを 記述するコスト

  127. 解決策1.テンプレートの作成

  128. 解決策2.専用エディタ (Selenium IDE)

  129. 2.テスト実行間隔

  130. 3.サーバサイド 動作確認

  131. その他気をつけること

  132. 1.何でもかんでも 画面テストで行わない

  133. 理由 運用コストが高くなる

  134. 単体テストでできることは 単体テストで

  135. 2.コマンドで実行できる ように設計しておくこと

  136. 理由 CIツールから実行 できるように

  137. 3.テストケースの 依存関係をなくす

  138. 理由 「ここだけテストしたい」 って時に効率よく

  139. None
  140. 御清聴 ありがとうございます