ブラウザを自動運転することでフロントエンドのテストを自動で実行したい。そう思ってツールを探していたところ、Nightwatch.jsが良さげ。ちなみにこういうテストはE2E(エンドツーエンド)テストと呼ばれるらしい。
Nightwatch.js | Node.js powered End-to-End testing framework http://nightwatchjs.org/
Getting Started | Nightwatch.js http://nightwatchjs.org/gettingstarted
環境を作って試してみる。
Node.jsのインストール
Node.js https://nodejs.org/ja/
今回のテストマシンはMac。Node.jsは既に入っていたので軽く動作確認。
$ node - v
v6 . 9.4
$ vi hello . js
console . log ( ‘Hello World ’) ;
$ node hello . js
Hello World
Nightwatch.jsのインストール
$ sudo npm install - g nightwatch
JDK 8のインストール
Java SE Development Kit 8 – Downloads http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Java SE Development Kit 8u131をダウンロード
インストーラを使ってインストール
$ java - version
java version "1.8.0_131"
Java ( TM ) SE Runtime Environment ( build 1.8.0_131 - b11 )
Java HotSpot ( TM ) 64 - Bit Server VM ( build 25.131 - b11 , mixed mode )
Seleniumのインストール
Selenium – Web Browser Automation http://www.seleniumhq.org/
Selenium Standalone Serverをダウンロード
実行する
$ java - jar selenium - server - standalone - 3.4.0.jar
ブラウザ毎にWebDriverのインストール
Selenium WebDriver http://www.seleniumhq.org/projects/webdriver/
Nightwatch.jsは標準でFirefoxで実行される
設定ファイルの作成
とりあえずサンプルの設定ファイルをコピペ。
Getting Started | Nightwatch.js http://nightwatchjs.org/gettingstarted#settings-file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$ vi nightwatch . json
{
"src_folders" : [ "tests" ] ,
"output_folder" : "reports" ,
"custom_commands_path" : "" ,
"custom_assertions_path" : "" ,
"page_objects_path" : "" ,
"globals_path" : "" ,
"selenium" : {
"start_process" : false ,
"server_path" : "" ,
"log_path" : "" ,
"port" : 4444 ,
"cli_args" : {
"webdriver.chrome.driver" : "" ,
"webdriver.gecko.driver" : "" ,
"webdriver.edge.driver" : ""
}
} ,
"test_settings" : {
"default" : {
"launch_url" : "http://localhost" ,
"selenium_port" : 4444 ,
"selenium_host" : "localhost" ,
"silent" : true ,
"screenshots" : {
"enabled" : false ,
"path" : ""
} ,
"desiredCapabilities" : {
"browserName" : "firefox" ,
"marionette" : true
}
} ,
"chrome" : {
"desiredCapabilities" : {
"browserName" : "chrome"
}
} ,
"edge" : {
"desiredCapabilities" : {
"browserName" : "MicrosoftEdge"
}
}
}
}
テストコードを書く
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ vi demo . js
module . exports = {
'Demo test Google' : function ( client ) {
client
. url ( 'http://www.google.com' )
. waitForElementVisible ( 'body' , 1000 )
. assert . title ( 'Google' )
. assert . visible ( 'input[type=text]' )
. setValue ( 'input[type=text]' , 'rembrandt van rijn' )
. waitForElementVisible ( 'button[name=btnG]' , 1000 )
. click ( 'button[name=btnG]' )
. pause ( 1000 )
. assert . containsText ( 'ol#rso li:first-child' ,
'Rembrandt - Wikipedia' )
. end ( ) ;
}
} ;
テストを実行
参考サイト
javascript – switch to a frame with Nightwatch.js – Stack Overflow https://stackoverflow.com/questions/27548030/switch-to-a-frame-with-nightwatch-js
Nightwatch.jsをE2Eテストフレームワークとして実プロジェクトに適用する時のtipsまとめ | MMMブログ http://blog.mmmcorp.co.jp/blog/2015/09/24/use-nightwatch/
WebアプリのUIテストを手軽に自動化できるNightwatch.jsの使い方 – WPJ https://www.webprofessional.jp/javascript-functional-testing-nightwatch-js/
姫路のホームページ製作屋WILDWEST-SERVICE https://www.wildwest-service.com/nightwatch/
以下はフロントエンドテストに関する参考ページ
フロントエンドにテストを導入 – Qiita http://qiita.com/howdy39/items/cdd5b252096f5a2fa438
フロントエンドのテストに真面目に向き合う – Qiita http://qiita.com/okmttdhr/items/cc58e83c259aa0049538