---
title: SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
tags:  #seleniumjp  
author: [Yahoo!デベロッパーネットワーク](https://www.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LE3N5ZM6E5.jpg?width=480
description: SeleniumのE2E(エンド・ツー・エンド)テストフレームワークを使用したテスト自動化の事例を紹介
published: February 10, 16
canonical: https://www.docswell.com/s/ydnjp/5M8195-2016-02-10-131958
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LE3N5ZM6E5.jpg)

E2Eテストフレームワークを
使⽤用したテスト⾃自動化事例例
ヤフー株式会社
マーケティングソリューションカンパニー
開発本部技術戦略略室
太⽥田 邦昭
2016年年2⽉月6⽇日


# Page. 2

![Page Image](https://bcdn.docswell.com/page/8EDWDR6M7G.jpg)

本⽇日の内容
• E2Eテストフレームワークを決める
• E2Eテストフレームワークを使ってテストを書く
• E2Eテスト実⾏行行環境について
• 本⽇日のまとめ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/V7P9XWYQJ8.jpg)

E2E（エンド·∙ツー·∙エンド）テストとは
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/2JVML8GPJQ.jpg)

E2E（エンド・ツー・エンド）テストとは
利利⽤用者側の視点に⽴立立って
サービス全体が正しく動作していることを
確認するテスト
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5EGGX58QEL.jpg)

テスト対象サイトについて
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4JQX8Z9WEP.jpg)

テスト対象サイトについて
• JavaScriptフレークワークとして、
AngularJSを使⽤用して開発されている
• 外部とのデータのやり取りはスタブで代⽤用
• テスト実⾏行行時にテスト専⽤用の環境が
⾃自動構築される
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/K74623X1E1.jpg)

E2Eテストフレームワークの絞り込み
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LJ1VM1N5EG.jpg)

E2Eテストフレームワークの絞り込み
• テストフレームワークを選ぶにあたっての要件
• JavaScriptのテストが⾏行行えること
• 簡単にテストスクリプトの作成とテスト実⾏行行が
⾏行行えること
• JavaScriptベースでスクリプトが書けること
• Jenkinsとの連携が出来ること
• ヘッドレスブラウザーとの連携ができること
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/GJWL384WE2.jpg)

E2Eテストフレームワークの絞り込み
• 要件に該当するE2Eテストフレームワーク
Nightwatch.js
•
•
http://nightwatchjs.org
Protractor
•
•
https://angular.github.io/protractor/#/
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4EZMV822J3.jpg)

E2Eテストフレームワークの特徴
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/Y76N5K667V.jpg)

Nightwatch.js
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/G755YP6574.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/9J2NG6MGER.jpg)

E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js
引⽤用：Nightwatch.js公式サイト（ http://nightwatchjs.org/guide   ）
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/DEYPV9XGEM.jpg)

Protractor
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VJN5ML1878.jpg)

E2Eテストフレームワークの特徴 – Protractor
• AngularJSアプリケーションに特化
• JavaScript（Node.js）ベース
• ⾃自動待機（WaitForAngular）API
• AngularJSのレンダリングと$httpの呼び出しが
完了了するまで⾃自動で待機する
（⇒待機処理理を明⽰示的に指定する必要がない）
• ダイレクトブラウザードライバー接続
• Selenium  Serverを介さずにブラウザーの
ドライバーに直接接続することが可能
（FirefoxとChromeのみ）
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/YE9YN45XJ3.jpg)

E2Eテストフレームワークの特徴 – Protractor
引⽤用：Protractor公式サイト（https://angular.github.io/protractor/#/infrastructure）
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/GE86KQY97D.jpg)

ヘッドレスブラウザーを選ぶ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LEL9ZX4MJR.jpg)

ヘッドレスブラウザーを選ぶ
• 主なヘッドレスブラウザー
• 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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4JMZVLK6EW.jpg)

ヘッドレスブラウザーを選ぶ
• 今回はPhantomJSを選択
• PhantomJSを選択した主な理理由
• ヘッドレストブラウザーとしてメジャーな存在
• JavaScript  のテストを⾛走らせるために
よく採⽤用されている
• Nightwatch.js及びProtractorでサポートされている
• 技術情報が沢⼭山ある
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PJR62KXN79.jpg)

ヘッドレスブラウザーの特徴
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/PEXMDL687X.jpg)

PhantomJS
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/3EKGXL1LJD.jpg)

ヘッドレスブラウザーの特徴 -‐‑‒ PhantomJS
• WebKitベース
• ヘッドレスでWebサイトテスト
• Webサイトのスクリーンショットが取得可能
• 標準のDOMAPI⼜又はJQueryライクな
標準ライブラリでページを操作
• ⾃自動パフォーマンス分析
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/L73N53Q675.jpg)

ここまでのまとめ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/87DWD49MJG.jpg)

ここまでのまとめ
• テスト対象Webサイトは、JavaScriptフレーム
ワークであるAngularJSを使⽤用して作成されて
いる
• NigthWatch.jsとProtoractorの2種類選択
• 2種類のテストフレームワークを評価して
どちらか1つを選択
• ヘッドレスブラウザーはPhantomJSを選択
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/VJP9XMZQE8.jpg)

E2Eテストフレームワークを選ぶ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/2EVML9WPEQ.jpg)

E2Eテストフレームワークを選ぶ
• テストスクリプトやテストログの⾒見見やすさにつ
いては、Nightwatch.js
• Protractorは、画⾯面遷移時等のイベントに対し
てwaitForAngularAPIが⾃自動的にコールされる
ため明⽰示的な待機処理理が不不要で、テストスクリ
プトがシンプル
• テスト対象サイトでは、JavaScriptフレーム
ワークがAngularJSだが、今後はReactと
Reduxに変わる（AngularJSに特化した
Protractorでは対応困難）
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/57GGXZDQ7L.jpg)

E2Eテストフレームワークを選ぶ
• 今回選択したE2Eテストフレームワーク
• Nightwatch.js
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4EQX8L1W7P.jpg)

Nightwatch.jsを使って
テストを書く
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/KJ462DR171.jpg)

Nightwatch.jsを使ってテストを書く
• テストしたい内容は⼤大きく3種類
• アカウントに関係するテスト
•
新規アカウント追加,既存アカウント修正,etc
• 表⽰示に関するテスト
•
表⽰示件数,etc
• ダウンロードに関するテスト
•
CSVファイルのダウンロード,etc
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/LE1VMZQ57G.jpg)

Nightwatch.jsを使ってテストを書く
• テストを書く上でのポイント
• 操作対象の要素特定は、CSSセレクタを使⽤用
•
柔軟に要素を特定することが可能
• ページオブジェクトパターンを適⽤用
•
保守性を向上させる
• ダウンロードに関するテストはカスタムコマンド
及びカスタムアサーションで対応
•
Node.jsのライブラリ（File  System）を使⽤用して作成
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/GEWL39MW72.jpg)

ページオブジェクトパターンについて
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/47ZMV9Q2E3.jpg)

ページオブジェクトパターンについて
• Selenium  WebDriverを使⽤用して⾃自動テストス
イートを構築する上でよく使⽤用されるデザイン
パターン。
• テストスクリプトからUI操作部分を切切り出して
オブジェクトとして扱う⼿手法。
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
32


# Page. 33

![Page Image](https://bcdn.docswell.com/page/YJ6N5KN6JV.jpg)

サンプルテストによる適⽤用事例例
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
33


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GJ55YP55J4.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
• サンプルテスト
• Yahoo!  JAPAN  （http://www.yahoo.co.jp）で、
“nightwatch.js”を検索索する
• E2Eテストフレームワークは、Nightwatch.js
1.トップページを開く
2.「nightwatch.js」を⼊入⼒力力
3.【検索索】ボタンをクリック
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
4.「nightwatch.js」が検索索
されていることを確認
34


# Page. 35

![Page Image](https://bcdn.docswell.com/page/LE3N53N5E5.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
ファイル名：yahoo-‐‑‒search-‐‑‒test.js
UI操作系コード
分離離
UI操作コードと検証コード
が混在しているスクリプト
検証系コード
module.exports  =  {
tags:  [&#039;yahoo&#039;],
”demo&quot;  :  function  (client)  {
client
.url(&quot;http://www.yahoo.co.jp&quot;)
.waitForElementVisible(&quot;body&quot;,  1000)
.assert.title(&quot;Yahoo!  JAPAN&quot;)
.assert.visible(&quot;#srchtxt&quot;)
.setValue(&quot;#srchtxt&quot;,  &quot;nightwatch.js&quot;)
.waitForElementVisible(&quot;#srchbtn&quot;,  1000)
.click(&quot;#srchbtn&quot;)
.pause(1000)
.assert.title(&quot;「nightwatch」の検索索結果 -‐‑‒ Yahoo!検索索&quot;)
.end();
}
};
※⻘青⾊色のコードは操作系コード、緑⾊色のコードは検証系コード
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
35


# Page. 36

![Page Image](https://bcdn.docswell.com/page/8EDWD4WY7G.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
ファイル名：yahoo-‐‑‒search-‐‑‒test.js
UI操作系コード
分離離
UI操作コードと検証コード
が混在しているスクリプト
検証系コード
module.exports  =  {
tags:  [&quot;yahoo&quot;],
&quot;demo&quot;  :  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,  &quot;Yahoo!  JAPAN&quot;);
});
yahooPage.expect.element(&quot;@element1&quot;).to.be.visible;
yahooPage.setSearchWord(&quot;nightwatch.js&quot;);
yahooPage.clickSearchButton();
yahooPage.getPageTitle(client,function(result)  {
this.assert.ok(result,  &quot;「nightwatch.js」の検索索結果 -‐‑‒ Yahoo!検索索&quot;);
});
client.end();
}
};
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
36


# Page. 37

![Page Image](https://bcdn.docswell.com/page/V7P9XM92J8.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
ファイル名：home.js
UI操作系コード
分離離
UI操作コードと検証コード
が混在しているスクリプト
検証系コード
var  c ommands  =  {
yahooTop:  function()  {
this.waitForElementVisible(&quot;@element1&quot;,  10000);
return  this;
}
};
module.exports  =  {
url:&quot;http://www.yahoo.co.jp&quot;,
commands:  [commands],
elements:  {
element1:  {  selector:  &quot;body&quot;  }
}
};
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
37


# Page. 38

![Page Image](https://bcdn.docswell.com/page/2JVML9MXJQ.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
ファイル名：yahooSearch.js
UI操作系コード
分離離
UI操作コードと検証コード
が混在しているスクリプト
検証系コード
var  c ommands  =  {
setSearchWord:  function(strWord){
this.waitForElementVisible(&quot;@element1&quot;,10000)
.setValue(&quot;@element1&quot;,strWord);
return  this;
},
clickSearchButton:  function(){
this.waitForElementVisible(&quot;@element2&quot;,10000)
.click(&quot;@element2&quot;)
.waitForElementVisible(&quot;@element3&quot;,10000);
return  this;
},
getPageTitle:  function(client,callback){
var  s elf  =  this;
return  client.getTitle(function(title)  {
callback.call(self,title);
});
}
};
module.exports  =  {
commands:  [commands],
elements:  {
element1:  {  selector:  &quot;#srchtxt&quot;  },
element2:  {  selector:  &quot;#srchbtn&quot;  },
element3:  {  selector:  &quot;p.resultNum&quot;  }
}
};
※⻘青⾊色のコードは、操作コマンド
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
38


# Page. 39

![Page Image](https://bcdn.docswell.com/page/5EGGXZGREL.jpg)

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
テスト実⾏行行結果
Starting  selenium  server...  started  -‐‑‒ PID:    56439
[Yahoodemo]  Test  S uite
======================
Running:     demo
✔ Element  &lt;body&gt;  was  visible  after  72  milliseconds.
✔ Passed  [ok]:  Yahoo!  JAPAN  ok  Yahoo!  JAPAN
✔ Expected  element  &lt;#srchtxt&gt;  t o  be  visible
✔ Element  &lt;#srchtxt&gt;  was  visible  after  26   milliseconds.
✔ Element  &lt;#srchbtn&gt;  was  visible  after  35  milliseconds.
✔ Element  &lt;p.resultNum&gt;  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操作結果を戻す
直接検証（アサーション）は⾏行行わない。
検証は、テストコードに任せる。
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
39


# Page. 40

![Page Image](https://bcdn.docswell.com/page/4JQX8LXYEP.jpg)

Nightwatch.jsを使って
テストを実⾏行行する
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
40


# Page. 41

![Page Image](https://bcdn.docswell.com/page/K7462D6ZE1.jpg)

Nightwatch.jsを使ってテストを実⾏行行する
• リアルブラウザー（Firefox及びChrome）環境
•
Nightwatch.jsは、ダウンロードに関するテストを含めて
問題なく全てのテストが正常に終了了
• ヘッドレスブラウザー（PhantomJS）環境
正しい挙動を⾏行行わない場合があり⾮非常に不不安定で
ダウンロードも正常に⾏行行えない
• ヘッドレスブラウザーとしてPhantomJSの使⽤用は困難
（代替案を考える必要あり）
•
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/LJ1VMZVDEG.jpg)

ヘッドレスブラウザーの問題点と解決策
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
42


# Page. 43

![Page Image](https://bcdn.docswell.com/page/GJWL39L8E2.jpg)

ヘッドレスブラウザーの問題点と解決策
• PhantomJSは、WebKit ベースで作成されているが、
実際のブラウザーとは微妙に異異なる点がある
• PhantomJS 固有の問題でテストが失敗する、
テスト失敗の誤検知の問題
• PhantomJS 固有の問題を解決するということと
実際のプロダクトを改善することは別
• リアルブラウザーではテストが成功している
• リアルブラウザーをヘッドレス化して使⽤用すること
は出来ないだろうか？
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
43


# Page. 44

![Page Image](https://bcdn.docswell.com/page/4EZMV9M9J3.jpg)

リアルブラウザーのヘッドレス化
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
44


# Page. 45

![Page Image](https://bcdn.docswell.com/page/Y76N5KND7V.jpg)

リアルブラウザのヘッドレス化
• Xvfb（X  Virtual  Frame  Buffer）を使⽤用することで
リアルブラウザーのヘッドレス化が可能
（FirefoxとChromeのみ）
• Xvfbのインストールも簡単
$  sudo  yum  groupupdate  &quot;X  Window  System”
$  sudo yum  install  xorg-‐‑‒x11-‐‑‒server-‐‑‒Xvfb  
• FirefoxとChromeのインストールも難しくはない
（CentOS  7.x）
• Internet  ExplorerとSafariについては、別⽴立立で運⽤用
されているSelenium  Gridにリモート接続
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
45


# Page. 46

![Page Image](https://bcdn.docswell.com/page/G755YP5874.jpg)

リアルブラウザのヘッドレス化
• ヘッドレス化したリアルブラウザの起動
$  Xvfb :1  -‐‑‒screen 0  1200x1920x24 &amp;
$  export  DISPLAY=:1
$  google-‐‑‒chrome  http://www.yahoo.co.jp &amp;
$  
$  xwd -‐‑‒d isplay  :1  -‐‑‒root  |  xwdtopnm |  pnmtopng &gt;  screenshot.png
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
46


# Page. 47

![Page Image](https://bcdn.docswell.com/page/9J2NG6NVER.jpg)

E2Eテスト実⾏行行環境について
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/DEYPV9PQEM.jpg)

E2Eテスト実⾏行行環境について
① ⾃自動構築
Jenkins
② テスト起動
テスト対象Webサイト
③ テスト実⾏行行
Selenium  Grid
（ノード）
E2Eテストフレームワーク
（Nightwatch.js）
ヘッドレスブラウザー
（Firefox,  Chrome）
③ʼ’  Internet  Explorer,  Safari
でテストを⾏行行う場合
Selenium  Grid
（ハブ）
Selenium  Grid
（ノード）
Selenium  Grid
（ノード）
④ テスト結果レポート
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
48


# Page. 49

![Page Image](https://bcdn.docswell.com/page/VJN5ML5278.jpg)

本⽇日のまとめ
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
49


# Page. 50

![Page Image](https://bcdn.docswell.com/page/YE9YN4YDJ3.jpg)

本⽇日のまとめ
• E2EテストフレームワークはNigthwatch.jsを使⽤用
• ページオブジェクトパターンを使⽤用し保守性を向上
• リアルブラウザーをヘッドレス化
• 別⽴立立てSelenium  Gridとリモート接続によるテスト
並列列多重実⾏行行
• Jenkinsとの連携によるテスト⾃自動実⾏行行及びテスト
結果の可視化
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
50


# Page. 51

![Page Image](https://bcdn.docswell.com/page/GE86KQ657D.jpg)

質疑応答
Copyright  (C)  2016   Yahoo  Japan  Corporation.  All  Rights  Reserved.   無断引⽤用・転載禁⽌止
51


# Page. 52

![Page Image](https://bcdn.docswell.com/page/LEL9ZX93JR.jpg)

52


