Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
E2Eテストフレームワークを
使⽤用したテスト⾃自動化事例例
ヤフー株式会社
マーケティングソリューションカンパニー
開発本部技術戦略略室
太⽥田 邦昭
2016年年2⽉月6⽇日
本⽇日の内容
• E2Eテストフレームワークを決める
• E2Eテストフレームワークを使ってテストを書く
• E2Eテスト実⾏行行環境について
• 本⽇日のまとめ
Copyright  (C)  2016   Yahoo  Japan  Cor...
E2E(エンド·∙ツー·∙エンド)テストとは
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
3
E2E(エンド・ツー・エンド)テストとは
利利⽤用者側の視点に⽴立立って
サービス全体が正しく動作していることを
確認するテスト
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  R...
テスト対象サイトについて
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
5
テスト対象サイトについて
• JavaScriptフレークワークとして、
AngularJSを使⽤用して開発されている
• 外部とのデータのやり取りはスタブで代⽤用
• テスト実⾏行行時にテスト専⽤用の環境が
⾃自動構築される
Copyrigh...
E2Eテストフレームワークの絞り込み
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
7
E2Eテストフレームワークの絞り込み
• テストフレームワークを選ぶにあたっての要件
• JavaScriptのテストが⾏行行えること
• 簡単にテストスクリプトの作成とテスト実⾏行行が
⾏行行えること
• JavaScriptベースでスクリプ...
E2Eテストフレームワークの絞り込み
• 要件に該当するE2Eテストフレームワーク
• Nightwatch.js
• http://nightwatchjs.org
• Protractor
• https://angular.github....
E2Eテストフレームワークの特徴
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
10
Nightwatch.js
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
11
E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js
• JavaScript(Node.js)ベース
• Selenium  WebDriver  API
(JsonWireProtocol)を使⽤用
• CSSやXPath...
E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止...
Protractor
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
14
E2Eテストフレームワークの特徴 – Protractor
• AngularJSアプリケーションに特化
• JavaScript(Node.js)ベース
• ⾃自動待機(WaitForAngular)API
• AngularJSのレンダリン...
E2Eテストフレームワークの特徴 – Protractor
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
16
引⽤...
ヘッドレスブラウザーを選ぶ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
17
ヘッドレスブラウザーを選ぶ
• 主なヘッドレスブラウザー
• PhantomJS
• http://phantomjs.org/
• Zombie.JS
• http://zombie.js.org/
• SimerJS
• https://s...
ヘッドレスブラウザーを選ぶ
• 今回はPhantomJSを選択
• PhantomJSを選択した主な理理由
• ヘッドレストブラウザーとしてメジャーな存在
• JavaScript  のテストを⾛走らせるために
よく採⽤用されている
• Nig...
ヘッドレスブラウザーの特徴
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
20
PhantomJS
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
21
ヘッドレスブラウザーの特徴 -‐‑‒ PhantomJS
• WebKitベース
• ヘッドレスでWebサイトテスト
• Webサイトのスクリーンショットが取得可能
• 標準のDOMAPI⼜又はJQueryライクな
標準ライブラリでページを操作...
ここまでのまとめ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
23
ここまでのまとめ
• テスト対象Webサイトは、JavaScriptフレーム
ワークであるAngularJSを使⽤用して作成されて
いる
• NigthWatch.jsとProtoractorの2種類選択
• 2種類のテストフレームワークを評価...
E2Eテストフレームワークを選ぶ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
25
E2Eテストフレームワークを選ぶ
• テストスクリプトやテストログの⾒見見やすさにつ
いては、Nightwatch.js
• Protractorは、画⾯面遷移時等のイベントに対し
てwaitForAngularAPIが⾃自動的にコールされる
...
E2Eテストフレームワークを選ぶ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
27
• 今回選択したE2Eテストフ...
Nightwatch.jsを使って
テストを書く
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
28
Nightwatch.jsを使ってテストを書く
• テストしたい内容は⼤大きく3種類
• アカウントに関係するテスト
• 新規アカウント追加,既存アカウント修正,etc
• 表⽰示に関するテスト
• 表⽰示件数,etc
• ダウンロードに関する...
Nightwatch.jsを使ってテストを書く
• テストを書く上でのポイント
• 操作対象の要素特定は、CSSセレクタを使⽤用
• 柔軟に要素を特定することが可能
• ページオブジェクトパターンを適⽤用
• 保守性を向上させる
• ダウンロー...
ページオブジェクトパターンについて
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
31
ページオブジェクトパターンについて
• Selenium  WebDriverを使⽤用して⾃自動テストス
イートを構築する上でよく使⽤用されるデザイン
パターン。
• テストスクリプトからUI操作部分を切切り出して
オブジェクトとして扱う⼿手法...
サンプルテストによる適⽤用事例例
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
33
ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌...
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
35
※⻘青⾊色のコードは操作系コード、緑⾊色のコードは検証系コード
...
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
36
module.exports  =  {
tags:  ["ya...
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
37
var  commands  =  {
yahooTop:  f...
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
38
var  commands  =  {
setSearchWor...
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
39
Starting  selenium  server...  s...
Nightwatch.jsを使って
テストを実⾏行行する
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
40
Nightwatch.jsを使ってテストを実⾏行行する
• リアルブラウザー(Firefox及びChrome)環境
• Nightwatch.jsは、ダウンロードに関するテストを含めて
問題なく全てのテストが正常に終了了
• ヘッドレスブラウザ...
ヘッドレスブラウザーの問題点と解決策
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
42
ヘッドレスブラウザーの問題点と解決策
• PhantomJSは、WebKit ベースで作成されているが、
実際のブラウザーとは微妙に異異なる点がある
• PhantomJS 固有の問題でテストが失敗する、
テスト失敗の誤検知の問題
• Phan...
リアルブラウザーのヘッドレス化
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
44
リアルブラウザのヘッドレス化
• Xvfb(X  Virtual  Frame  Buffer)を使⽤用することで
リアルブラウザーのヘッドレス化が可能
(FirefoxとChromeのみ)
• Xvfbのインストールも簡単
• Firefox...
• ヘッドレス化したリアルブラウザの起動
リアルブラウザのヘッドレス化
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止...
E2Eテスト実⾏行行環境について
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
47
E2Eテスト実⾏行行環境について
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
48
Jenkins
E2Eテストフ...
本⽇日のまとめ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
49
本⽇日のまとめ
• E2EテストフレームワークはNigthwatch.jsを使⽤用
• ページオブジェクトパターンを使⽤用し保守性を向上
• リアルブラウザーをヘッドレス化
• 別⽴立立てSelenium  Gridとリモート接続によるテスト
...
質疑応答
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止
51
52
Próxima SlideShare
Cargando en…5
×

SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp

5.703 visualizaciones

Publicado el

SeleniumのE2E(エンド・ツー・エンド)テストフレームワークを使用したテスト自動化の事例を紹介

Publicado en: Tecnología
  • Sé el primero en comentar

SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp

  1. 1. E2Eテストフレームワークを 使⽤用したテスト⾃自動化事例例 ヤフー株式会社 マーケティングソリューションカンパニー 開発本部技術戦略略室 太⽥田 邦昭 2016年年2⽉月6⽇日
  2. 2. 本⽇日の内容 • E2Eテストフレームワークを決める • E2Eテストフレームワークを使ってテストを書く • E2Eテスト実⾏行行環境について • 本⽇日のまとめ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 2
  3. 3. E2E(エンド·∙ツー·∙エンド)テストとは Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 3
  4. 4. E2E(エンド・ツー・エンド)テストとは 利利⽤用者側の視点に⽴立立って サービス全体が正しく動作していることを 確認するテスト Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 4
  5. 5. テスト対象サイトについて Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 5
  6. 6. テスト対象サイトについて • JavaScriptフレークワークとして、 AngularJSを使⽤用して開発されている • 外部とのデータのやり取りはスタブで代⽤用 • テスト実⾏行行時にテスト専⽤用の環境が ⾃自動構築される Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 6
  7. 7. E2Eテストフレームワークの絞り込み Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 7
  8. 8. E2Eテストフレームワークの絞り込み • テストフレームワークを選ぶにあたっての要件 • JavaScriptのテストが⾏行行えること • 簡単にテストスクリプトの作成とテスト実⾏行行が ⾏行行えること • JavaScriptベースでスクリプトが書けること • Jenkinsとの連携が出来ること • ヘッドレスブラウザーとの連携ができること Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 8
  9. 9. E2Eテストフレームワークの絞り込み • 要件に該当するE2Eテストフレームワーク • Nightwatch.js • http://nightwatchjs.org • Protractor • https://angular.github.io/protractor/#/ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 9
  10. 10. E2Eテストフレームワークの特徴 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 10
  11. 11. Nightwatch.js Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 11
  12. 12. E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js • JavaScript(Node.js)ベース • Selenium  WebDriver  API (JsonWireProtocol)を使⽤用 • CSSやXPathのセレクターを使⽤用して⾮非常に 迅速且つシンプルにテストを書ける • Selenium  Serverの制御が可能 • CI(継続的インテグレーション)をサポート • 拡張が容易易 • カスタマイズコマンドとカスタマイズアサーション を作成することが可能 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 12
  13. 13. E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 13 引⽤用:Nightwatch.js公式サイト( http://nightwatchjs.org/guide   )
  14. 14. Protractor Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 14
  15. 15. E2Eテストフレームワークの特徴 – Protractor • AngularJSアプリケーションに特化 • JavaScript(Node.js)ベース • ⾃自動待機(WaitForAngular)API • AngularJSのレンダリングと$httpの呼び出しが 完了了するまで⾃自動で待機する (⇒待機処理理を明⽰示的に指定する必要がない) • ダイレクトブラウザードライバー接続 • Selenium  Serverを介さずにブラウザーの ドライバーに直接接続することが可能 (FirefoxとChromeのみ) Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 15
  16. 16. E2Eテストフレームワークの特徴 – Protractor Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 16 引⽤用:Protractor公式サイト(https://angular.github.io/protractor/#/infrastructure)
  17. 17. ヘッドレスブラウザーを選ぶ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 17
  18. 18. ヘッドレスブラウザーを選ぶ • 主なヘッドレスブラウザー • PhantomJS • http://phantomjs.org/ • Zombie.JS • http://zombie.js.org/ • SimerJS • https://slimerjs.org/ • CasperJS • http://casperjs.org/ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 18
  19. 19. ヘッドレスブラウザーを選ぶ • 今回はPhantomJSを選択 • PhantomJSを選択した主な理理由 • ヘッドレストブラウザーとしてメジャーな存在 • JavaScript  のテストを⾛走らせるために よく採⽤用されている • Nightwatch.js及びProtractorでサポートされている • 技術情報が沢⼭山ある Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 19
  20. 20. ヘッドレスブラウザーの特徴 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 20
  21. 21. PhantomJS Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 21
  22. 22. ヘッドレスブラウザーの特徴 -‐‑‒ PhantomJS • WebKitベース • ヘッドレスでWebサイトテスト • Webサイトのスクリーンショットが取得可能 • 標準のDOMAPI⼜又はJQueryライクな 標準ライブラリでページを操作 • ⾃自動パフォーマンス分析 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 22
  23. 23. ここまでのまとめ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 23
  24. 24. ここまでのまとめ • テスト対象Webサイトは、JavaScriptフレーム ワークであるAngularJSを使⽤用して作成されて いる • NigthWatch.jsとProtoractorの2種類選択 • 2種類のテストフレームワークを評価して どちらか1つを選択 • ヘッドレスブラウザーはPhantomJSを選択 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 24
  25. 25. E2Eテストフレームワークを選ぶ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 25
  26. 26. E2Eテストフレームワークを選ぶ • テストスクリプトやテストログの⾒見見やすさにつ いては、Nightwatch.js • Protractorは、画⾯面遷移時等のイベントに対し てwaitForAngularAPIが⾃自動的にコールされる ため明⽰示的な待機処理理が不不要で、テストスクリ プトがシンプル • テスト対象サイトでは、JavaScriptフレーム ワークがAngularJSだが、今後はReactと Reduxに変わる(AngularJSに特化した Protractorでは対応困難) Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 26
  27. 27. E2Eテストフレームワークを選ぶ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 27 • 今回選択したE2Eテストフレームワーク • Nightwatch.js
  28. 28. Nightwatch.jsを使って テストを書く Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 28
  29. 29. Nightwatch.jsを使ってテストを書く • テストしたい内容は⼤大きく3種類 • アカウントに関係するテスト • 新規アカウント追加,既存アカウント修正,etc • 表⽰示に関するテスト • 表⽰示件数,etc • ダウンロードに関するテスト • CSVファイルのダウンロード,etc Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 29
  30. 30. Nightwatch.jsを使ってテストを書く • テストを書く上でのポイント • 操作対象の要素特定は、CSSセレクタを使⽤用 • 柔軟に要素を特定することが可能 • ページオブジェクトパターンを適⽤用 • 保守性を向上させる • ダウンロードに関するテストはカスタムコマンド 及びカスタムアサーションで対応 • Node.jsのライブラリ(File  System)を使⽤用して作成 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 30
  31. 31. ページオブジェクトパターンについて Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 31
  32. 32. ページオブジェクトパターンについて • Selenium  WebDriverを使⽤用して⾃自動テストス イートを構築する上でよく使⽤用されるデザイン パターン。 • テストスクリプトからUI操作部分を切切り出して オブジェクトとして扱う⼿手法。 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 32
  33. 33. サンプルテストによる適⽤用事例例 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 33
  34. 34. ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 34 • サンプルテスト • Yahoo!  JAPAN  (http://www.yahoo.co.jp)で、 “nightwatch.js”を検索索する • E2Eテストフレームワークは、Nightwatch.js 1.トップページを開く 2.「nightwatch.js」を⼊入⼒力力 3.【検索索】ボタンをクリック 4.「nightwatch.js」が検索索 されていることを確認
  35. 35. Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 35 ※⻘青⾊色のコードは操作系コード、緑⾊色のコードは検証系コード module.exports  =  { tags:  ['yahoo'], ”demo"  :  function  (client)  { client .url("http://www.yahoo.co.jp") .waitForElementVisible("body",  1000) .assert.title("Yahoo!  JAPAN") .assert.visible("#srchtxt") .setValue("#srchtxt",  "nightwatch.js") .waitForElementVisible("#srchbtn",  1000) .click("#srchbtn") .pause(1000) .assert.title("「nightwatch」の検索索結果 -‐‑‒ Yahoo!検索索") .end(); } }; ファイル名:yahoo-‐‑‒search-‐‑‒test.js ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例 UI操作系コード 分離離 UI操作コードと検証コード が混在しているスクリプト 検証系コード
  36. 36. Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 36 module.exports  =  { tags:  ["yahoo"], "demo"  :  function  (client)  { var  homePage  =  client.page.home(); homePage.navigate(); client.maximizeWindow(); homePage.yahooTop  (); var  yahooPage  =  client.page.yahooSearch  (); yahooPage.getPageTitle(client,function(result)  { this.assert.ok(result,  "Yahoo!  JAPAN"); }); yahooPage.expect.element("@element1").to.be.visible; yahooPage.setSearchWord("nightwatch.js"); yahooPage.clickSearchButton(); yahooPage.getPageTitle(client,function(result)  { this.assert.ok(result,  "「nightwatch.js」の検索索結果 -‐‑‒ Yahoo!検索索"); }); client.end(); } }; ファイル名:yahoo-‐‑‒search-‐‑‒test.js 検証系コード UI操作系コード 分離離 UI操作コードと検証コード が混在しているスクリプト ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
  37. 37. Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 37 var  commands  =  { yahooTop:  function()  { this.waitForElementVisible("@element1",  10000); return  this; } }; module.exports  =  { url:"http://www.yahoo.co.jp", commands:  [commands], elements:  { element1:  {  selector:  "body"  } } }; ファイル名:home.js UI操作系コード 分離離 UI操作コードと検証コード が混在しているスクリプト 検証系コード ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
  38. 38. Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 38 var  commands  =  { setSearchWord:  function(strWord){ this.waitForElementVisible("@element1",10000) .setValue("@element1",strWord); return  this; }, clickSearchButton:  function(){ this.waitForElementVisible("@element2",10000) .click("@element2") .waitForElementVisible("@element3",10000); return  this; }, getPageTitle:  function(client,callback){ var  self  =  this; return  client.getTitle(function(title)  { callback.call(self,title); }); } }; module.exports  =  { commands:  [commands], elements:  { element1:  {  selector:  "#srchtxt"  }, element2:  {  selector:  "#srchbtn"  }, element3:  {  selector:  "p.resultNum"  } } }; ファイル名:yahooSearch.js UI操作系コード 分離離 UI操作コードと検証コード が混在しているスクリプト 検証系コード ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例 ※⻘青⾊色のコードは、操作コマンド
  39. 39. Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 39 Starting  selenium  server...  started  -‐‑‒ PID:    56439 [Yahoodemo]  Test  Suite ====================== Running:    demo ✔ Element  <body>  was  visible  after  72  milliseconds. ✔ Passed  [ok]:  Yahoo!  JAPAN  ok  Yahoo!  JAPAN ✔ Expected  element  <#srchtxt>  to  be  visible ✔ Element  <#srchtxt>  was  visible  after  26   milliseconds. ✔ Element  <#srchbtn>  was  visible  after  35  milliseconds. ✔ Element  <p.resultNum>  was  visible  after  36  milliseconds. ✔ Passed  [ok]:  「nightwatch.js」の検索索結果 -‐‑‒ Yahoo!検索索 ok  「nightwatch.js」の検索索結果 -‐‑‒ Yahoo!検索索 OK.  7  assertions  passed.  (3.814s) テスト実⾏行行結果 ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例 テストコード UI操作オブジェクト UI操作コマンド呼び出し UI操作結果を戻す 操作 値を検証 直接UIを操作することは⾏行行わない。 必ず、UI操作オブジェクトを介して⾏行行う。 直接検証(アサーション)は⾏行行わない。 検証は、テストコードに任せる。
  40. 40. Nightwatch.jsを使って テストを実⾏行行する Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 40
  41. 41. Nightwatch.jsを使ってテストを実⾏行行する • リアルブラウザー(Firefox及びChrome)環境 • Nightwatch.jsは、ダウンロードに関するテストを含めて 問題なく全てのテストが正常に終了了 • ヘッドレスブラウザー(PhantomJS)環境 • 正しい挙動を⾏行行わない場合があり⾮非常に不不安定で ダウンロードも正常に⾏行行えない • ヘッドレスブラウザーとしてPhantomJSの使⽤用は困難 (代替案を考える必要あり) Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 41
  42. 42. ヘッドレスブラウザーの問題点と解決策 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 42
  43. 43. ヘッドレスブラウザーの問題点と解決策 • PhantomJSは、WebKit ベースで作成されているが、 実際のブラウザーとは微妙に異異なる点がある • PhantomJS 固有の問題でテストが失敗する、 テスト失敗の誤検知の問題 • PhantomJS 固有の問題を解決するということと 実際のプロダクトを改善することは別 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 43 • リアルブラウザーではテストが成功している • リアルブラウザーをヘッドレス化して使⽤用すること は出来ないだろうか?
  44. 44. リアルブラウザーのヘッドレス化 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 44
  45. 45. リアルブラウザのヘッドレス化 • Xvfb(X  Virtual  Frame  Buffer)を使⽤用することで リアルブラウザーのヘッドレス化が可能 (FirefoxとChromeのみ) • Xvfbのインストールも簡単 • FirefoxとChromeのインストールも難しくはない (CentOS  7.x) • Internet  ExplorerとSafariについては、別⽴立立で運⽤用 されているSelenium  Gridにリモート接続 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 45 $  sudo  yum  groupupdate  "X  Window  System” $  sudo yum  install  xorg-‐‑‒x11-‐‑‒server-‐‑‒Xvfb  
  46. 46. • ヘッドレス化したリアルブラウザの起動 リアルブラウザのヘッドレス化 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 46 $  Xvfb :1  -‐‑‒screen 0  1200x1920x24 & $  export  DISPLAY=:1 $  google-‐‑‒chrome  http://www.yahoo.co.jp & $   $  xwd -‐‑‒display  :1  -‐‑‒root  |  xwdtopnm |  pnmtopng >  screenshot.png
  47. 47. E2Eテスト実⾏行行環境について Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 47
  48. 48. E2Eテスト実⾏行行環境について Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 48 Jenkins E2Eテストフレームワーク (Nightwatch.js) ヘッドレスブラウザー (Firefox,  Chrome) テスト対象Webサイト ① ⾃自動構築 ② テスト起動 ③ テスト実⾏行行 ④ テスト結果レポート Selenium  Grid (ハブ) Selenium  Grid (ノード) Selenium  Grid (ノード) Selenium  Grid (ノード) ③ʼ’  Internet  Explorer,  Safari でテストを⾏行行う場合
  49. 49. 本⽇日のまとめ Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 49
  50. 50. 本⽇日のまとめ • E2EテストフレームワークはNigthwatch.jsを使⽤用 • ページオブジェクトパターンを使⽤用し保守性を向上 • リアルブラウザーをヘッドレス化 • 別⽴立立てSelenium  Gridとリモート接続によるテスト 並列列多重実⾏行行 • Jenkinsとの連携によるテスト⾃自動実⾏行行及びテスト 結果の可視化 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 50
  51. 51. 質疑応答 Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.  無断引⽤用・転載禁⽌止 51
  52. 52. 52

×