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

744 Views

February 10, 16

#seleniumjp #E2Eテスト #テスト自動化 #Nightwatch.js #Selenium #PhantomJS

スライド概要

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

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

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

またはPlayer版

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

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 165.2K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 86.6K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 74.2K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 58.1K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 36K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 29.3K

各ページのテキスト

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

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

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

10.

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.

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.

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.

21.

22.

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

23.

24.

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

25.

26.

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

27.

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.

32.

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.

41.

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

42.

43.

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

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

http://www.yahoo.co.jp

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.

50.

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

51.

52.