JavaScript
PhantomJS
mocha
Nightmare

Nightmare(v1) + mocha ベースに、coffee-scriptでE2Eテストを書く

More than 3 years have passed since last update.


はじめに(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


実行結果(スクリーンショット)


ログイン後

rakuten_login.png


ログアウト後

rakuten_logout.png


example(2015/10/18更新)

rakuten.co.jpにログインして、ログアウトする単純なテストケースですが、githubにexampleを作りましたので、参考までに使ってみてください。

https://github.com/imunew/nightmare-example/tree/nightmare_v1

(masterブランチは、v2ベースになっていますので、nightmare_v1をブランチを参照ください)


参考