はじめに(2015/10/18追記)
本投稿は、Nightmare v1を前提とした内容になっています。
v2については、こちらの投稿を参照ください。
セットアップ
phantomjsのインストール
$ brew install phantomjs
$ phantomjs -v
2.0.0
coffee-script, nightmare, mocha のインストール
$ npm install --save coffee-script nightmare mocha
テストケースの作成
Nightmareを継承して、TestRunnerクラスを作成
@mizchiさんのNightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になったをみて真似してみました。
はじめ、javascriptに変換して使っていましたが、mochaをCoffeeScriptで使おうにもあるように、coffee-scriptのまま実行できるので、変換せずに使います。
exampleではrakuten.co.jp
にアクセスするので、RakutenTestRunner
というクラス名にしています。
Nightmare = require 'nightmare'
class RakutenTestRunner extends Nightmare
constructor: (@config) ->
super()
login: () ->
@
.viewport(800,600)
.goto(@config.app.login.url)
.wait()
.type('input#userid', @config.app.login.username)
.type('input#passwd', @config.app.login.password)
.click('input.loginButton')
.wait()
module.exports = RakutenTestRunner
テストケースの作成
assert = require 'assert'
RakutenTestRunner = require './rakuten-test-runner'
config = require './config'
testRunner = new RakutenTestRunner(config)
describe 'login and logout at rakuten.co.jp', () ->
this.timeout(config.mocha.timeout)
describe 'login and logout', () ->
it 'login and logout', (done) ->
testRunner
.login()
.evaluate(
() ->
return {
"location": location.origin + location.pathname
}
,
(result) ->
assert.equal(result.location, 'http://www.rakuten.co.jp/')
)
.screenshot('./logs/screenshots/login.png')
.click('a.mr-logout-btn')
.wait()
.evaluate(
() ->
return {
"location": location.origin + location.pathname
}
,
(result) ->
assert.equal(result.location, config.app.logout.url)
)
.screenshot('./logs/screenshots/logout.png')
.run(done)
テスト実行
package.json
に下記のように実行コマンドを登録しておき、
{
"scripts": {
"e2e-test:example": "mocha --compilers coffee:coffee-script/register tests/example.coffee"
},
npm run
にて実行します。
$ npm run e2e-test:example
実行結果(スクリーンショット)
ログイン後
ログアウト後
example(2015/10/18更新)
rakuten.co.jp
にログインして、ログアウトする単純なテストケースですが、githubにexampleを作りましたので、参考までに使ってみてください。
https://github.com/imunew/nightmare-example/tree/nightmare_v1
(masterブランチは、v2ベースになっていますので、nightmare_v1をブランチを参照ください)