Edited at

Nightwatch.js + PhantomJS/Chrome + Selenium + GruntでスマホサイトのEnd-to-endテストをする

More than 3 years have passed since last update.

今回は一部しかスクリプトを載せていないですが、全スクリプトはGitHubで公開しています。


必要なもの


  • Node.js

  • npm

npmはNode.jsを入れた時に入るけど、bash以外のシェルを使ってるとパスを通さないといけないかも。


使うもの


  1. Nightwatch.js

  2. PhantomJS

  3. Selenium

  4. Grunt

PhantomJSはhomebrewで入れてたが、そちらは消して今回はnpmで入れるようにした。

Seleniumのページからダウンロードして使っても良いけど、npmにあるselenium-server-standalone-jarを使うようにした。


ディレクトリ構成

┣ nightwatch.json

┣ package.json
┣ node_modules
┣ Gruntfile.js
┣ reports
┣ screenshots
┗ tests
┣ amazon
┃ ┗ amazon-top.js
┗ github
┣ github-top.js
┗ github-mypage.js


nightwatch.json

テストのスクリプト・テスト結果のxml・selenium-server-standalone-[version].jar・スクリーンショットの保存先などのパスを書く。

今回はPhantomJSを使うので、ブラウザ名のところにphantomjsと書いて、バイナリーへのパス書いて、ユーザーエージェントも変更する。

Nightwatch.jsはxpathも使えるけど、今回はCSSをデフォルトにした。

それと、テスト失敗時にスクリーンショットも撮るようにした。

{

"src_folders" : ["tests"],
"output_folder" : "reports",
"custom_commands_path" : "",
"custom_assertions_path" : "",
"page_objects_path" : "",
"globals_path" : "",

"test_workers" : {"enabled" : true, "workers" : "auto"},

"selenium" : {
"start_process" : true,
"server_path" : "node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-2.47.1.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "",
"webdriver.ie.driver" : ""
}
},

"test_settings" : {
"default" : {
"launch_url" : "http://localhost",
"selenium_port" : 4444,
"selenium_host" : "localhost",
"silent": true,
"firefox_profile": false,
"chrome_driver" : "",
"screenshots" : {
"enabled" : true,
"path" : "screenshots",
"on_failure": true,
"on_error": false
},
"desiredCapabilities": {
"browserName": "phantomjs",
"javascriptEnabled": true,
"acceptSslCerts": true,
"phantomjs.page.settings.userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
"phantomjs.binary.path": "node_modules/phantomjs/lib/phantom/bin/phantomjs"
},
"use_xpath": false
}
}
}


Gruntfile.js

Nightwatch.jsでGruntを使うにはgrunt-nightwatchを読み込む必要あり。

module.exports = function(grunt) {

var nightwatch = require("nightwatch");

nightwatch.initGrunt(grunt);

grunt.initConfig({
nightwatch: {
options: {
cwd: "./"
},
"default" : {},
browserstack: {
argv: {
env: "browserstack"
},
settings: {
silent: true
}
},
"all" : {
argv: {
env: "default, browserstack"
}
}
}
});

grunt.loadNpmTasks("grunt-nightwatch");
grunt.registerTask("default", ["nightwatch"]);

};


テストスクリプト


github-top.js

module.exports = {

"@tags": ["toppage"],
"GitHub top page" : function (browser) {

browser.url("https://github.com/");

browser
.waitForElementVisible("body", 10000)
.expect.element("div.home-hero").text.to.contain("GitHub");

browser.end();
}
};



github-mypage.js

module.exports = {

"@tags": ["mypage"],
"GitHub my page" : function (browser) {

browser.url("https://github.com/watarumohawk");

browser
.waitForElementVisible("div.profile-header", 10000)
.expect.element("body > div.profile-header > h3").text.to.equal("watarumohawk");

browser.end();
}
};



Gruntを使う準備

$ npm install -g grunt-cli

環境によってはsudoを使う必要があるらしい。


テスト実行

$ grunt


debugとverbose

$ grunt --debug

$ grunt --verbose


グループごとにテスト

グループごと(今の場合、amazonとgithub)にテストをしたい場合は、

$ grunt --group amazon

特定のグループをスキップしたい場合は、--skipgroupを使う。

$ grunt --skipgroup github

公式ドキュメント: Test Groups


タグごとにテスト

$ grunt --group github

と実行するとgithubディレクトリ内のテストスクリプトが全部実行されてしまうので、tagを使って

$ grunt --group github --tag toppage

などのように実行すると便利。

グループ関係無く、loginのテストだけしたいなら、

$ grunt --tag login

など。

特定のtagをスキップしたい場合はグループの時と同様にして、--skiptagsを使う。

$ grunt --group github --skiptags mypage

公式ドキュメント: Test Tags


テストする時に変更するかもしれない箇所


ユーザーエージェント

ユーザーエージェントはnightwatch.jsonに書いてる。

"desiredCapabilities": {

"browserName": "phantomjs",
"javascriptEnabled": true,
"acceptSslCerts": true,
"phantomjs.page.settings.userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"
}


スクリーンショット



  • テストが失敗した時に撮る場合

    "screenshots" : {
    
    "enabled" : true,
    "path" : "tests/screenshots",
    "on_failure": true
    }



  • コマンドエラーの時に撮る場合(今回はfalseにしてある)

    "screenshots" : {
    
    "enabled" : true,
    "path" : "tests/screenshots",
    "on_failure": true,
    "on_error": false
    }


公式ドキュメント: Test setings


Chromeを使う

PhantomJSでは上手くいかないサイトがあってChromeを使うようにした。

chromedriverをインストール

$ npm install --save-dev chromedriver

あとは必要なところを変更


nightwatch.json

{

"src_folders" : ["tests"],
"output_folder" : "reports",
"custom_commands_path" : "",
"custom_assertions_path" : "",
"page_objects_path" : "",
"globals_path" : "",

"test_workers" : {"enabled" : true, "workers" : "auto"},

"selenium" : {
"start_process" : true,
"server_path" : "node_modules/selenium-server-standalone-jar/jar/selenium-server-standalone-2.47.1.jar",
"log_path" : "",
"host" : "127.0.0.1",
"port" : 4444,
"cli_args" : {
"webdriver.chrome.driver" : "",
"webdriver.ie.driver" : ""
}
},

"test_settings" : {
"default" : {
"launch_url" : "http://localhost",
"selenium_port" : 4444,
"selenium_host" : "localhost",
"silent": true,
"firefox_profile": false,
"cli_args": {
"webdriver.chrome.driver": "node_modules/chromedriver/lib/chromedriver/chromedriver"
},
"screenshots" : {
"enabled" : true,
"path" : "screenshots",
"on_failure": true,
"on_error": false
},
"desiredCapabilities": {
"browserName": "chrome",
"javascriptEnabled": true,
"acceptSslCerts": true,
"chromeOptions": {
"args": [
"--user-agent=Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
"--window-size=414,736"
]
}
},
"use_xpath": false
}
}
}