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

459 Views

February 10, 16

スライド概要

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

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

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.

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

11.

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

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.

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

14.

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

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.

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

17.

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

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.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例 • サンプルテスト • 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

35.
[beta]
ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例

ファイル名:yahoo-‐‑‒search-‐‑‒test.js

UI操作系コード

分離離
UI操作コードと検証コード
が混在しているスクリプト

検証系コード

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();
}
};
※⻘青⾊色のコードは操作系コード、緑⾊色のコードは検証系コード

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

35

36.
[beta]
ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例

ファイル名:yahoo-‐‑‒search-‐‑‒test.js

UI操作系コード

分離離
UI操作コードと検証コード
が混在しているスクリプト

検証系コード

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();
}
};

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

36

37.
[beta]
ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例

ファイル名:home.js
UI操作系コード

分離離
UI操作コードと検証コード
が混在しているスクリプト

検証系コード

var  c ommands  =  {
yahooTop:  function()  {
this.waitForElementVisible("@element1",  10000);
return  this;
}
};
module.exports  =  {
url:"http://www.yahoo.co.jp",
commands:  [commands],
elements:  {
element1:  {  selector:  "body"  }
}
};

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

37

38.
[beta]
ページオブジェクトパターンについて – サンプルテストによる適⽤用事例例
ファイル名:yahooSearch.js

UI操作系コード

分離離
UI操作コードと検証コード
が混在しているスクリプト

検証系コード

var  c ommands  =  {
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  s elf  =  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"  }
}
};
※⻘青⾊色のコードは、操作コマンド

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

38

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

リアルブラウザのヘッドレス化 • Xvfb(X  Virtual  Frame  Buffer)を使⽤用することで リアルブラウザーのヘッドレス化が可能 (FirefoxとChromeのみ) • Xvfbのインストールも簡単 $  sudo  yum  groupupdate  "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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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