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を使います。
exports.config = {
//Seleniumサーバアドレス設定
seleniumAddress: 'http://localhost:4444/wd/hub',
// テストコードの設定
specs: ['spec.js'],
// 使用するブラウザの設定
multiCapabilities: [{
browserName: 'chrome'
}]
}
テストコードの作成
テストコードをJasmineで書いていきます。
今回は自作のページではなく、Protractorのデモサイトに対するテストコードを作成します。
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を作成します。
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を参考にしました。