40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

Gruntと連携させてNightwatchでテスト書いたら自動実行するやり方

たぶん後々自分で調べることが出てきそうなので簡単に手順をメモ

事前準備

必要なモノとか

  • 以下のnpm module
    • grunt
    • grunt-contrib-watch
    • grunt-nightwatch
  • 上記npmモジュール準備した後に利用するGruntfile.coffee

npmモジュールインストール

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-nightwatch --save-dev

Gruntfile.coffeeの準備

module.exports = (grunt) ->
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    watch:
      files:['tests/*.js']
      tasks:'nightwatch'
  
    nightwatch:
      options:{}

  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.loadNpmTasks 'grunt-nightwatch' 
  grunt.registerTask 'default', ['watch']

利用する

ターミナルを立ち上げ、以下コマンド入力します

grunt

そうすると、

Running "watch" task
Waiting...

となるかと思います。あとは以下の様なファイルを作成&保存

// tests/google.js
module.exports = {
  setUp : function() {

  },

  tearDown : function() {

  },
  'Demo test Google' : function (client) {
    client
      .url("http://www.google.com")
      .waitForElementVisible('body', 3000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('button[name=btnG]', 3000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('#main', 'The Night Watch')
      .end();
  }
}

すると、ターミナルにこんな感じで実行結果が表示されます

>> File "tests/google.js" changed.
Running "nightwatch" task
>> Executing "default" tests

これで、テストコード書く→ターミナルでコマンド実行というほんのちょっとの手間が省けました