Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
ご清聴ありがとうございました
Nächste SlideShare
Wird geladen in …5
×

JenkinsとSeleniumの活用事例

6.833 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

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

×