ProtractorでのE2Eテストを一つのgulpタスクで

E2Eテストを実行させるのに、http serverの起動、seelnium standaloneサーバーの起動、protractorの実行と 3つのターミナルが必要になります。
それをコマンド1つでテストのたびに毎回それをやるのも面倒だったので、gulpのタスクとしてできるようにしました。
ローカルでの実行を前提としています。

protractorの設定次第では、seelnium standaloneサーバーの起動はprotractorが自動でやってくれます。

protractor.conf.jsにseleniumAddressがあれば、selenium standaloneサーバーを起動せず、そこを見に行く。
seleniumAddressがなければ、自動でseelnium standaloneサーバーを起動し、
protractorのテストが終われば、起動したselenium standaloneサーバーを自動で終了する。
という動きになるようです。

ただ、開発時(エディター開いてゴリゴリ書いている時)は、http-serverは起動しっぱなしだし、
seelnium standalone サーバーの起動終了は、protractorが自動でやってくれるので必要ないでしょう。
別環境で修正とかした後に、テストの実行だけしたい時などに。

npm

package.json(devDependenciesだけ抜き出し)

  "devDependencies": {
    "gulp": "^3.8.10",
    "gulp-exit": "0.0.2",
    "gulp-load-plugins": "^0.8.0",
    "gulp-protractor": "0.0.12",
    "gulp-webserver": "^0.9.0",
    "protractor": "^1.5.0",
    "run-sequence": "^1.0.2"
  },

gulp-exit

ウェブサーバーの終了させるのに必要です。

gulp-load-plugins

プラグイン用に。
今回の場合は数が少ないのでなくても可。
今後のために入れている感じです。
gulp-protractorはloadできませんでした。

gulp-protractor

protractor用のプラグイン

gulp-webserver

gulp-connectの代わり
gulp-connectはdeprecateされたらしいので。

run-sequence

タスクの実行順を指定するために必要

gulp

gulpfile.js

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var protractor = require('gulp-protractor');
var runSequence = require('run-sequence');

var config = {
  http:{
    host:'localhost',
    port:8000
  }
}

gulp.task('default',function(){
    console.log('gulp run');
});

gulp.task('webserver-start',function(){
  return gulp.src('app').pipe(plugins.webserver({
    host:config.http.host,
    port:config.http.port,
    livereload:false
  }));
});

gulp.task('protractor',function(){
  return gulp.src('test/e2e/*_spec.js').pipe(protractor.protractor({
    configFile:"test/protractor-conf.js",
    args:[
    '--baseUrl', 'http://' + config.http.host + ':' + config.http.port
    ]
  }));
});

gulp.task('e2e',function(callback){
  runSequence(
    'webserver-start',
    'protractor',
    function() {
      gulp.src("").pipe(plugins.exit());
      callback();
    });
});

webserver-start

gulp.src('app')
app配下が公開ディレクトリなので。

protractor

gulp.src('test/e2e/*_spec.js')
もともとprotractor.conf.jsに記載していましたが、
srcを指定しないと動きませんでした。
こちらに移動して、protractor.conf.jsのspecsは削除しました。

protractorのargsについてはprotractor.conf.jsにも記載できますが、
web-serverと同じ設定値を使いたかったのでこちらで記載。

e2e

最初、callbackの定義をどこに書くのかなど考えましたが、そういうものではないようでした。
この辺は、まだgulpのことをよく理解できていない感じです。

protractor

protractor.conf.js

exports.config = { 
  allScriptsTimeout: 11000,

  capabilities: {
    'browserName': 'chrome'
  },  

  framework: 'jasmine',

  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

gulp-protractorのgithubに seleniumAddressの代わりに下記のように記述することで、自動起動、自動ダウンできる。
と記載してありましたが、何も指定しなくても、自動で起動、ダウンしてくれました。

seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.39.0.jar',

ディレクトリ構造

.
├── app
│   └── index.html
├── gulpfile.js
├── package.json
└── test
    ├── e2e
    │   └── sample_spec.js
    └── protractor-conf.js

gulpで「e2e」のタスクを実行すれば、protractorのテストができます。

参考

http://qiita.com/oreo3@github/items/0f037e7409be02336cb9
https://github.com/mllrsohn/gulp-protractor
https://github.com/schickling/gulp-webserver/issues/48
https://github.com/schickling/gulp-webserver