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

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

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

E2E（エンド·∙ツー·∙エンド）テストとは
3

E2E（エンド・ツー・エンド）テストとは
利利⽤用者側の視点に⽴立立って
サービス全体が正しく動作していることを
確認するテスト
4

テスト対象サイトについて
5

テスト対象サイトについて
• JavaScriptフレークワークとして、
AngularJSを使⽤用して開発されている
• 外部とのデータのやり取りはスタブで代⽤用
• テスト実⾏行行時にテスト専⽤用の環境が
⾃自動構築される
6

E2Eテストフレームワークの絞り込み
7

• テストフレームワークを選ぶにあたっての要件
• JavaScriptのテストが⾏行行えること
• 簡単にテストスクリプトの作成とテスト実⾏行行が
⾏行行えること
• JavaScriptベースでスクリプトが書けること
• Jenkinsとの連携が出来ること
• ヘッドレスブラウザーとの連携ができること
8

• 要件に該当するE2Eテストフレームワーク
• Nightwatch.js
• http://nightwatchjs.org
• Protractor
• https://angular.github.io/protractor/#/
9

E2Eテストフレームワークの特徴
10

Nightwatch.js
11

E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js
• JavaScript（Node.js）ベース
• Selenium WebDriver API
（JsonWireProtocol）を使⽤用
• CSSやXPathのセレクターを使⽤用して⾮非常に
迅速且つシンプルにテストを書ける
• Selenium Serverの制御が可能
• CI（継続的インテグレーション）をサポート
• 拡張が容易易
• カスタマイズコマンドとカスタマイズアサーション
を作成することが可能
12

E2Eテストフレームワークの特徴 -‐‑‒ Nightwatch.js
13
引⽤用：Nightwatch.js公式サイト（ http://nightwatchjs.org/guide ）

Protractor
14

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

E2Eテストフレームワークの特徴 – Protractor
16
引⽤用：Protractor公式サイト（https://angular.github.io/protractor/#/infrastructure）

ヘッドレスブラウザーを選ぶ
17

• 主なヘッドレスブラウザー
• PhantomJS
• http://phantomjs.org/
• Zombie.JS
• http://zombie.js.org/
• SimerJS
• https://slimerjs.org/
• CasperJS
• http://casperjs.org/
18

• 今回はPhantomJSを選択
• PhantomJSを選択した主な理理由
• ヘッドレストブラウザーとしてメジャーな存在
• JavaScript のテストを⾛走らせるために
よく採⽤用されている
• Nightwatch.js及びProtractorでサポートされている
• 技術情報が沢⼭山ある
19

ヘッドレスブラウザーの特徴
20

PhantomJS
21

ヘッドレスブラウザーの特徴 -‐‑‒ PhantomJS
• WebKitベース
• ヘッドレスでWebサイトテスト
• Webサイトのスクリーンショットが取得可能
• 標準のDOMAPI⼜又はJQueryライクな
標準ライブラリでページを操作
• ⾃自動パフォーマンス分析
22

ここまでのまとめ
23

ここまでのまとめ
• テスト対象Webサイトは、JavaScriptフレーム
ワークであるAngularJSを使⽤用して作成されて
いる
• NigthWatch.jsとProtoractorの2種類選択
• 2種類のテストフレームワークを評価して
どちらか1つを選択
• ヘッドレスブラウザーはPhantomJSを選択
24

E2Eテストフレームワークを選ぶ
25

• テストスクリプトやテストログの⾒見見やすさにつ
いては、Nightwatch.js
• Protractorは、画⾯面遷移時等のイベントに対し
てwaitForAngularAPIが⾃自動的にコールされる
ため明⽰示的な待機処理理が不不要で、テストスクリ
プトがシンプル
• テスト対象サイトでは、JavaScriptフレーム
ワークがAngularJSだが、今後はReactと
Reduxに変わる（AngularJSに特化した
Protractorでは対応困難）
26

27
• 今回選択したE2Eテストフレームワーク
• Nightwatch.js

Nightwatch.jsを使って
テストを書く
28

Nightwatch.jsを使ってテストを書く
• テストしたい内容は⼤大きく3種類
• アカウントに関係するテスト
• 新規アカウント追加,既存アカウント修正,etc
• 表⽰示に関するテスト
• 表⽰示件数,etc
• ダウンロードに関するテスト
• CSVファイルのダウンロード,etc
29

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

ページオブジェクトパターンについて
31

ページオブジェクトパターンについて
• Selenium WebDriverを使⽤用して⾃自動テストス
イートを構築する上でよく使⽤用されるデザイン
パターン。
• テストスクリプトからUI操作部分を切切り出して
オブジェクトとして扱う⼿手法。
32

サンプルテストによる適⽤用事例例
33

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

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
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
検証系コード
分離離

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
分離離
検証系コード

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
分離離
検証系コード
※⻘青⾊色のコードは、操作コマンド

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操作オブジェクトを介して⾏行行う。
直接検証（アサーション）は⾏行行わない。
検証は、テストコードに任せる。

Nightwatch.jsを使って
テストを実⾏行行する
40

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

ヘッドレスブラウザーの問題点と解決策
42

ヘッドレスブラウザーの問題点と解決策
• PhantomJSは、WebKit ベースで作成されているが、
実際のブラウザーとは微妙に異異なる点がある
• PhantomJS 固有の問題でテストが失敗する、
テスト失敗の誤検知の問題
• PhantomJS 固有の問題を解決するということと
実際のプロダクトを改善することは別
43
• リアルブラウザーではテストが成功している
• リアルブラウザーをヘッドレス化して使⽤用すること
は出来ないだろうか？

リアルブラウザーのヘッドレス化
44

リアルブラウザのヘッドレス化
• Xvfb（X Virtual Frame Buffer）を使⽤用することで
リアルブラウザーのヘッドレス化が可能
（FirefoxとChromeのみ）
• Xvfbのインストールも簡単
• FirefoxとChromeのインストールも難しくはない
（CentOS 7.x）
• Internet ExplorerとSafariについては、別⽴立立で運⽤用
されているSelenium Gridにリモート接続
45
$ sudo yum groupupdate "X Window System”
$ sudo yum install xorg-‐‑‒x11-‐‑‒server-‐‑‒Xvfb

• ヘッドレス化したリアルブラウザの起動
リアルブラウザのヘッドレス化
46
$ Xvfb :1 -‐‑‒screen 0 1200x1920x24 &
$ export DISPLAY=:1
$ google-‐‑‒chrome http://www.yahoo.co.jp &
$
$ xwd -‐‑‒display :1 -‐‑‒root | xwdtopnm | pnmtopng > screenshot.png

E2Eテスト実⾏行行環境について
47

E2Eテスト実⾏行行環境について
48
Jenkins
E2Eテストフレームワーク
（Nightwatch.js）
ヘッドレスブラウザー
（Firefox, Chrome）
テスト対象Webサイト
① ⾃自動構築
② テスト起動 ③ テスト実⾏行行
④ テスト結果レポート
Selenium Grid
（ハブ）
Selenium Grid
（ノード）
Selenium Grid
（ノード）
Selenium Grid
（ノード）
③ʼ’ Internet Explorer, Safari
でテストを⾏行行う場合

本⽇日のまとめ
49

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

質疑応答
51

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

More Related Content

What's hot (20)

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

More from Yahoo!デベロッパーネットワーク (20)

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