PyConJP 2015 スライド資料

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

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

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

Transcript

1. なぜWeb画面自動テストはうまく行かないのか シルバーエッグ・テクノロジー株式会社 エンジニア 谷口 英 PyCon　JP 2015/10/10・11
2. 自己紹介
3. 谷口 英 （たにぐち あきら）
4. 所属
5. シルバーエッグテクノロジー （リアルタイム　レコメンド）
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. クロスブラウザ対応
33. マルチプラットフォーム対応
34. Selenium Grid
35. Appium
36. マウス・キーボード 動作再現可能
37. JavaScript実行可能
38. じゃあ余裕でしょ
39. そうでもない
40. Web画面自動テストは うまくいかないことが多い
41. 特に『運用』
42. なぜだ
43. 結論：コストが高い
44. 主な理由は４つ
45. その１：テストケース 記述コスト
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. その２：マルチブラウザ 対応コスト
52. ブラウザごとに違う 記述方法
53. Safariは「戻れ」ない
54. IEは「クリック」 できない
55. スマフォのブラウザは 最大化できない
56. バージョン間の動作差異
57. というのを 意識せざるを得ない
58. いずれなくなるらしいけど
59. その３：パラメータ 変更によるコスト
60. シチュエーション 苗字と名前を入力する フォーム
61. 「山田」　「太郎」 と入力
62. 「山田」　「太郎」 と入力
63. 「山田」　「太郎」 を確認
64. 「勘解由小路」　「江川富士一二三四五左衛門助太郎」 を入力
65. 「勘解由小路」　「江川富士一二三四五左衛門助太郎」 を確認
66. 同じような処理を 幾度となく・・
67. 仕様変更でミドルネーム まで管理することに。。
68. テストケースごちゃごちゃ
69. その４：環境を 用意するコスト
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” } ] } 作業者にはコードを 記述させない １クッション 置くイメージ
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. １．動作の安定性 （ネットワーク？）
124. ２．自社製品じゃない
125. 今後の課題
126. １．テストケースファイルを 記述するコスト
127. 解決策１．テンプレートの作成
128. 解決策２．専用エディタ （Selenium IDE）
129. 2．テスト実行間隔
130. 3．サーバサイド 動作確認
131. その他気をつけること
132. １．何でもかんでも 画面テストで行わない
133. 理由 運用コストが高くなる
134. 単体テストでできることは 単体テストで
135. ２．コマンドで実行できる ように設計しておくこと
136. 理由 CIツールから実行 できるように
137. ３．テストケースの 依存関係をなくす
138. 理由 「ここだけテストしたい」 って時に効率よく
140. 御清聴 ありがとうございます