Successfully reported this slideshow.
Your SlideShare is downloading. ×

JenkinsとSeleniumの活用事例

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
AWS Systems manager 入門
AWS Systems manager 入門
Loading in …3
×

Check these out next

1 of 47 Ad

More Related Content

Slideshows for you (20)

Similar to JenkinsとSeleniumの活用事例 (20)

Advertisement

Recently uploaded (20)

JenkinsとSeleniumの活用事例

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

×