Downloaded 21 times
![要素の指定
• id
• ex.) id=‘username’
• name
• ex.) name=‘ok_button’
• CSSセレクタ
• ex.) p:nth-last-of-type(2)
• Xpath
• ex.)
/html/body/div[1]/div/div[2]/div[2]/div[2]/
div/div[2]/div[1]/div[2]/span](https://image.slidesharecdn.com/jenkinsv1-150917061300-lva1-app6892/85/Jenkins-Selenium-15-320.jpg)
![作成のポイント (IDE)
• 初期設定
• 変数（store）
• 実行速度（setSpeed）
• 要素
• id > name > CSSセレクタ >Xpath の優先順位
• コマンド
• ページ読み込み(Pause）
• スクリーンショット(captureEntirePageScreenshot)
• JavaScript
• 入力データの生成や値の加工
• 例) storedVars['order'].substring(9,14)](https://image.slidesharecdn.com/jenkinsv1-150917061300-lva1-app6892/85/Jenkins-Selenium-19-320.jpg)
![テスト自動化ツール[Selenium]を検討してみて](https://cdn.slidesharecdn.com/ss_thumbnails/20160723selenium-160724074540-thumbnail.jpg?width=640&height=640&fit=bounds)
JenkinsとSeleniumの活用事例
- 1. JENKINSとSELENIUMの活用事例 - プロジェクトへの試験自動化の導入 - NTTコミュニケーションズ株式会社 近藤剛 Jenkinsユーザ・カンファレンス 東京2015
- 2. 自己紹介 名前 近藤 剛 （こんどうたけし） 仕事 NTTコミュニケーションズ株式会社 技術開発部 クラウド系のサービス・基盤の開発
- 3. はじめに • 今日はWebアプリの受入試験を題材に、Seleniumや Jenkinsをどのように導入し、自動化・効率化を進めて いったかという話をします。 • Seleniumをあまり知らない・これから使ってみたい、と いう方に向けて、簡単な解説や実際の設定例を盛り込 んでいます。 •SeleniumやJenkinsを用いた試験自動化導入の参考に なれば幸いです。
- 4. 本日の流れ 1. 自動化の背景 2. Seleniumの導入 3.Jenkinsとの連携 4. まとめ
- 5. とある開発プロジェクト 『プラットフォーム開発』 • アジャイル的な開発 • 1〜1.5ヶ月のイテレーション •自分はWebアプリなどの受入試験を担当 DEV QA STG PROD 単体 結合 受入 開発環 境 試験工程 最終
- 6. 現場の悩み 試験項目はイテレーション毎に増加する • 約100項目 →約2000項目 試験期間は開発後半になるほど減少する • 開発・デプロイの遅れと迫り来るリリース さらに、要件変更やパッチ適用で試験頻度も増加…
- 7.
- 8. 自動化への期待 手動ベースのWEBアプリ試験について、 • 単純作業 • 繰り返し作業 を自動化することで、 効率的な試験の実施 開発後も使えるテスト を実現したい
- 9.
- 10. SELENIUM SUITE • Selenium1 / Selenium RC • 初期のSelenium • Selenium 2 / Selenium WebDriver • GoogleのWebDriverと統合 • Selenium IDE /Selenium Builder • Firefoxプラグイン
- 11.
- 12. どのSELENIUMを使うか？ Selenium IDE • Firefoxプラグインで簡単に操作の記録・再生 •Firefox限定 Selenium 2 / Selenium WebDriver • JavaやRubyでお好みにテストコードを記述 • 複数のブラウザに対応
- 13. SELENIUMの記述 Selenium IDE Selenium 2/ Selenium WebDriver
- 14.
- 15. 要素の指定 • id • ex.)id=‘username’ • name • ex.) name=‘ok_button’ • CSSセレクタ • ex.) p:nth-last-of-type(2) • Xpath • ex.) /html/body/div[1]/div/div[2]/div[2]/div[2]/ div/div[2]/div[1]/div[2]/span
- 16. 要素を探すには? • Selenium IDEの操作記録 •Firebugで要素を調査
- 17. コマンドの指定 • Click • クリック（リンク、ボタン、チェックボックス） •Wait • 特定の文字列が表示されるまで待機 • Verify / Assert • 特定の文字列が存在するかを検証 • Store • 文字列を格納 • Type • 文字列を記述
- 18.
- 19. 作成のポイント (IDE) • 初期設定 •変数（store） • 実行速度（setSpeed） • 要素 • id > name > CSSセレクタ >Xpath の優先順位 • コマンド • ページ読み込み(Pause） • スクリーンショット(captureEntirePageScreenshot) • JavaScript • 入力データの生成や値の加工 • 例) storedVars['order'].substring(9,14)
- 20. テストケースの作成（WEBDRIVER） • Selenium IDEはアドオン単体でテストケースの作 成・実行 •Selenium 2 / WebDriverを利用する場合には、言 語に合わせてテストのフレームワークを組み合わせ て利用する
- 21. CUCUMBER • 受入れテストのフレームワーク • Gherkin書式で記述 •Given： 前提 • When： もし （操作内容） • Then： ならば （期待する結果） • feature fileとstep fileの作成 • feature file : テストケースを記述 • step file : テストコードを記述
- 22.
- 23.
- 24. CUCUMBERの実行 $ cucumber -fhtml -o result.html . 緑：Pass 黄：Pending
- 25. 作成のポイント（WEBDRIVER） • ブラウザ切り替え • @brower= Selenium::WebDriver.for :firefox • @brower = Selenium::WebDriver.for :chrome • ラッパーの利用 • rubyならcapybaraとか
- 26. 実行環境 • 最初はローカルPCにテスト環境を構築 • Mac一台（一人）でテストケースを作成し、 Seleniumを実行 •PJが進むにつれてチームでの試験環境が必要に • 同じテストケースでも実行環境によりFailする • テストケースの修正箇所やバージョンが不明 Webアプリ
- 27. VMへの移行 + GITの導入 Git WebアプリCentOS •VM上で安定して動くテストケースをチームで作成 • gitによりチームメンバの作業が見える化 push pull test
- 28. VM移行時のヒント • Selenium用のFirefoxプロファイル作成 • $firefox –ProfileManger –no-remote • Selenium実行時の画面確認 • 仮想ディスプレイ： Xvfb • VNC： X11VNC • + SSHトンネルでセキュアに接続 • Selenium Serverの利用 java -Dfile.encoding=8859_1 –jar selenium-server-standalone-2.44.0.jar –port 1234 -htmlSuite "*firefox" "https://hoge.portal" ”test_suite.html" "results.html" -firefoxProfileTemplate /home/hoge/.mozilla/firefox/278ftidu.Selenium
- 29.
- 30.
- 31.
- 32.
- 33. 実行結果 • Selenium HTMLReport Plugin
- 34. 便利なプラグイン • Build PipelinePlugin • 複数Jobの連携可視化 • Email Extension Plugin • メール通知 • Text Finder Plugin • キーワード検索 • Xvfb Plugin • Xvfbの立ち上げ • Emotional Jenkins Plugin • 安らぎ https://wiki.jenkins-ci.org/display/JENKINS/Emotional+Jenkins+Plugin
- 35. BUILD PIPELINE • 複数のJobをパイプラインとして表示 •Jobの実行順序や状態が見やすくなる
- 36. UIの評価 • WEBアプリはUI確認も重要なテスト項目 • 表示のズレ •文章の変更 • 情報の更新 • 人の目で判断する以外に方法はないか？ • 画像比較の自動化
- 37. スクリーンショット • Selenium IDE •captureEntirePageScreenshot • Selenium WebDriver • driver.save_screenshot(‘screenshot.png’) • ウィンドウサイズを固定しておくこと • windowMaximize • manage.window.resize_to(1200,900)
- 38. IMAGE MAGICK • 画像処理のOSSツール •http://www.imagemagick.org • compareコマンド • ２枚の画像を比較して差分を計算 • http://www.imagemagick.org/script/compare.php
- 39. • $ compare–verbose –metric PSNR test1.png test2.png diff.png test1.png test2.png diff.png 画像比較
- 40. JOB登録 • compareコマンドを実行するシェルを作成 • テスト実行日と正解画像の比較 •テスト実行日と前日画像の比較 • JenkinsにJobとして登録 • Seleniumの後工程としてシェルを実行 • 実行結果 • 日付変更など定常的に発生する差分 • 差分値に閾値を設定してアラート • レイアウト変更などで発生する差分 • image too dissimilarエラーを拾いアラート
- 41.
- 42. 導入成果と課題 基本的な機能は１日で試験できるようになった レポート作成などのペーパーワークが減った サービスレベルのモニタリングにも流用できた 面白がって自動化に興味を持ってくれる人が増えた • 運用フェーズにおける継続した取り組み • テストケースも保守しなければすぐに陳腐化 • 学習コストが高い？
- 43.
- 44. 例えばサーバのパッチ動作検証 試験対象 SV 試験対象SV 環境構築-SV ①新規コードpush ②Jobをキック ③新規コードpull ③新規コードpull ④VM起動 ⑤ミドル構築・デプロイ ⑥試験実行 協調 master slave CLIツール （クラウドAPI用） + knife-solo SeleniumServer 開発者 ⑦VM終了 API呼び出し プロビジョニング パッチ適用 UI試験 リグレッション試験 ・・・ 試験-SV Git-SV 試験対象-SV
- 45.
- 46. 開発環境の構成イメージ Provision サーバ Stage(本番擬似環境) Test (インテグレーション) Production (本番環境)Dev（ローカル開発環境） 開発マシンPull / Push 運用監視 PM系 Webhook (PRトリガ) 障害通知 内製の簡易 Cloud Formation メール 送信擬似 通知
- 47.