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

11253 ワード
JavaScript Nightmare PhantomJS mocha JavaScript テキストリンク

はじめに（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をブランチを参照ください）

参考