gulpでProtractor(Selenium+Jasmine)を動かす

ProtractorはAngularJSのためのE2E(End To End)テストのフレームワークです。
AngularJSのための、といっても中身はSelenium(ブラウザの自動操作ツール)とJasmine(javascript用のテストフレームワーク)なので、普通にWebシステムのE2Eテストとして使うことができます。
今回は、Protractorのインストールからgulpで実行するまでについてまとめます。

インストール

npm(node.js)とgulpは入っている前提で。
Protractorはnpmからインストールし、webdriver-managerのupdateを実行します。
npm install protractor
node node_modules/protractor/bin/webdriver-manager update

Protractor単体で動かす

Seleniumサーバの起動

まずは、gulpを使わずにProtractor単体で動かしてみます。
Seleniumを動かすためにSeleniumサーバを起動します。
webdriver-manager start
正常に起動すれば、4444ポートで起動します。
起動後に
http://localhost:4444/wd/hub
を開くと、サーバステータス情報を確認できます。
もし、うまくいかないときは4444ポートを別のタスクで使ってないか調べてみましょう。
Protractorを使うときは常に起動した状態にしておきます。

Seleniumサーバを閉じる場合

Seleniumサーバは一度起動した場合、コマンドプロンプトなどを閉じても実行されたままになります。
閉じる場合については、今のところタスクを強制的に終了する方法しかわかってないです。
Windowsでタスクを強制終了するには、まずnetstat -oa | grep 4444を実行してタスクのプロセスIDを取得します(プロセスIDはSeleniumサーバ起動時にも表示されるので、それがわかるのであれば不要)。
その後、taskkill /F /PID [プロセスID]を実行するとタスクを終了させることができます。

Protractorの設定

Protractorの設定ファイル(protractor.conf.js)を作成します。
ブラウザはとりあえずChromeを使います。

protractor.conf.js

exports.config = {
  //Seleniumサーバアドレス設定
  seleniumAddress: 'http://localhost:4444/wd/hub',
  // テストコードの設定
  specs: ['spec.js'],
  // 使用するブラウザの設定
  multiCapabilities: [{
    browserName: 'chrome'
  }]
}

テストコードの作成

テストコードをJasmineで書いていきます。
今回は自作のページではなく、Protractorのデモサイトに対するテストコードを作成します。

spec.js

describe('AngularJSホームページ', function() {
  it('タイトルを持つ', function() {
    // 接続先URLの設定
    browser.get('http://juliemr.github.io/protractor-demo/');
    // タイトルが指定文字列に一致するかどうかのテスト
    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});

Protractorの実行

Protracotrの実行は、(Seleniumサーバが起動している状態で)protractor [設定ファイル名]で実行することが可能です。今回の場合、protractor protractor.conf.jsで実行できます。
実行して少し待つと自動的にChromeが開いて、Protractorのデモサイトが開かれた後、Chromeが閉じます。
コマンド上には1 spec, 0 failuresと出力されると思います。これは、Jasmineの実行結果で1つのテストメソッドに対して失敗が0という意味です。

gulpで動かす

gulp-protractorパッケージをインストール

gulpからProtractorを動かすためのパッケージ、gulp-protractorをインストールします。
npm install gulp-protractor

gulpfile.jsを作る

gulpで実行する処理を定義するgulpfile.jsを作成します。

gulpfile.js

var gulp = require('gulp');
var protractor = require('gulp-protractor').protractor;
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;

// Seleniumサーバの起動
gulp.task('webdriver', webdriver_standalone);

// Protractorの実行
gulp.task('protractor', function() {
  return gulp
  .src(['./spec.js'])
  .pipe(protractor({
    // Protractorの設定ファイル
    configFile: './protractor.conf.js'
  }))
  .on('error', function(e) { throw e; });
});

gulpでの実行

gulp protractorを実行することで、Protractorが起動します。
Seleniumサーバを起動するには、gulp webdriverで起動できますが、こちらは最初の一度だけ実行し、起動しておけばＯＫです。

参考

AngularJS用テストフレームワーク「Protractor」チュートリアル日本語訳)

あと、gulpからProtractorを動かす処理については、gulp-protractorのフォルダ内にあるexampleを参考にしました。