Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JENKINSとSELENIUMの活用事例
- プロジェクトへの試験自動化の導入 -
NTTコミュニケーションズ株式会社
近藤 剛
Jenkinsユーザ・カンファレンス
東京2015
自己紹介
名前
近藤 剛 (こんどう たけし)
仕事
NTTコミュニケーションズ株式会社
技術開発部 クラウド系のサービス・基盤の開発
はじめに
• 今日はWebアプリの受入試験を題材に、Seleniumや
Jenkinsをどのように導入し、自動化・効率化を進めて
いったかという話をします。
• Seleniumをあまり知らない・これから使ってみたい、と
いう方に向けて、簡単な...
本日の流れ
1. 自動化の背景
2. Seleniumの導入
3. Jenkinsとの連携
4. まとめ
とある開発プロジェクト
『プラットフォーム開発』
• アジャイル的な開発
• 1〜1.5ヶ月のイテレーション
• 自分はWebアプリなどの受入試験を担当
DEV QA STG PROD
単体 結合 受入
開発環
境
試験工程 最終
現場の悩み
試験項目はイテレーション毎に増加する
• 約100項目 → 約2000項目
試験期間は開発後半になるほど減少する
• 開発・デプロイの遅れと迫り来るリリース
さらに、要件変更やパッチ適用で試験頻度も増加…
どうする?!
品質
スコープ
リソース 時間
自動化への期待
手動ベースのWEBアプリ試験について、
• 単純作業
• 繰り返し作業
を自動化することで、
 効率的な試験の実施
 開発後も使えるテスト
を実現したい
SELENIUMとは
Webブラウザのテストを自動化するツール
• http://www.seleniumhq.org/
SELENIUM SUITE
• Selenium 1 / Selenium RC
• 初期のSelenium
• Selenium 2 / Selenium WebDriver
• GoogleのWebDriverと統合
• Selenium...
簡単なデモ
どのSELENIUMを使うか?
Selenium IDE
• Firefoxプラグインで簡単に操作の記録・再生
• Firefox限定
Selenium 2 / Selenium WebDriver
• JavaやRubyでお好みにテストコード...
SELENIUMの記述
Selenium IDE
Selenium 2 / Selenium WebDriver
WEBブラウザ操作
要素 コマンド
要素の指定
• id
• ex.) id=‘username’
• name
• ex.) name=‘ok_button’
• CSSセレクタ
• ex.) p:nth-last-of-type(2)
• Xpath
• ex.)
/html...
要素を探すには?
• Selenium IDEの操作記録
• Firebugで要素を調査
コマンドの指定
• Click
• クリック(リンク、ボタン、チェックボックス)
• Wait
• 特定の文字列が表示されるまで待機
• Verify / Assert
• 特定の文字列が存在するかを検証
• Store
• 文字列を格納
• ...
テストケースの作成(IDE)
• 操作の自動記録だけでは安定したケースは作れない
• 自動記録をベースにしてテストケースを拡張すること
作成のポイント (IDE)
• 初期設定
• 変数(store)
• 実行速度(setSpeed)
• 要素
• id > name > CSSセレクタ >Xpath の優先順位
• コマンド
• ページ読み込み(Pause)
• スクリーンシ...
テストケースの作成(WEBDRIVER)
• Selenium IDEはアドオン単体でテストケースの作
成・実行
• Selenium 2 / WebDriverを利用する場合には、言
語に合わせてテストのフレームワークを組み合わせ
て利用する
CUCUMBER
• 受入れテストのフレームワーク
• Gherkin書式で記述
• Given: 前提
• When: もし (操作内容)
• Then: ならば (期待する結果)
• feature fileとstep fileの作成
• ...
FEATURE FILE
• login.feature
テストケースの概要
Gherkin書式で
テストケースの記述
STEP FILE
• login_steps.rb
featureファイルに
合わせてコードを記述
CUCUMBERの実行
$ cucumber -f html -o result.html .
緑:Pass
黄:Pending
作成のポイント(WEBDRIVER)
• ブラウザ切り替え
• @brower = Selenium::WebDriver.for :firefox
• @brower = Selenium::WebDriver.for :chrome
• ラ...
実行環境
• 最初はローカルPCにテスト環境を構築
• Mac一台(一人)でテストケースを作成し、
Seleniumを実行
• PJが進むにつれてチームでの試験環境が必要に
• 同じテストケースでも実行環境によりFailする
• テストケースの...
VMへの移行 + GITの導入
Git
WebアプリCentOS
• VM上で安定して動くテストケースをチームで作成
• gitによりチームメンバの作業が見える化
push pull
test
VM移行時のヒント
• Selenium用のFirefoxプロファイル作成
• $ firefox –ProfileManger –no-remote
• Selenium実行時の画面確認
• 仮想ディスプレイ: Xvfb
• VNC: X11...
JENKINSの導入
• 定期的にテストを実行したい
• 実行結果を管理したい
ようやく登場…
導入イメージ
Git
Webアプリ
• SeleniumをJobに登録
• JenkinsがJobを定期実行
pus
h
pull
test
kick
result
ダッシュボード
JOBの登録
• Seleniumhq Plugin
• シェルで実行
実行結果
• Selenium HTML Report Plugin
便利なプラグイン
• Build Pipeline Plugin
• 複数Jobの連携可視化
• Email Extension Plugin
• メール通知
• Text Finder Plugin
• キーワード検索
• Xvfb Plug...
BUILD PIPELINE
• 複数のJobをパイプラインとして表示
• Jobの実行順序や状態が見やすくなる
UIの評価
• WEBアプリはUI確認も重要なテスト項目
• 表示のズレ
• 文章の変更
• 情報の更新
• 人の目で判断する以外に方法はないか?
• 画像比較の自動化
スクリーンショット
• Selenium IDE
• captureEntirePageScreenshot
• Selenium WebDriver
• driver.save_screenshot(‘screenshot.png’)
• ウ...
IMAGE MAGICK
• 画像処理のOSSツール
• http://www.imagemagick.org
• compareコマンド
• 2枚の画像を比較して差分を計算
• http://www.imagemagick.org/scrip...
• $ compare –verbose –metric PSNR test1.png test2.png diff.png
test1.png test2.png
diff.png
画像比較
JOB登録
• compareコマンドを実行するシェルを作成
• テスト実行日と正解画像の比較
• テスト実行日と前日画像の比較
• JenkinsにJobとして登録
• Seleniumの後工程としてシェルを実行
• 実行結果
• 日付変更な...
現在の姿
Git
Webアプリ
• Jenkinsがテストの実行・レポートを管理
• プラグインやシェルの利用で開発・テストを効率化
pus
h
pull
test
kick
result
chatemail
開発者
fix
post
導入成果と課題
 基本的な機能は1日で試験できるようになった
 レポート作成などのペーパーワークが減った
 サービスレベルのモニタリングにも流用できた
 面白がって自動化に興味を持ってくれる人が増えた
• 運用フェーズにおける継続した取...
最後に
• SeleniumによるWebアプリ試験以外にも、様々な
開発チームがCIや自動化を導入しています
• 最後に少しだけご紹介
例えばサーバのパッチ動作検証
試験対象 SV 試験対象 SV
環境構築-SV
①新規コードpush
②Jobをキック
③新規コードpull ③新規コードpull
④VM起動
⑤ミドル構築・デプロイ
⑥試験実行
協調
master slave
C...
他にも
開発環境の構成イメージ
Provision
サーバ
Stage(本番擬似環境)
Test (インテグレーション)
Production (本番環境)Dev(ローカル開発環境)
開発マシン Pull / Push
運用監視
PM系
Webhook...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

JenkinsとSeleniumの活用事例

6,831 views

Published on

2015年Jenkinsユーザカンファレンスの発表資料です。

Published in: Internet
  • Be the first to comment

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. ご清聴ありがとうございました

×