Edited at

gulpとprotractorでAngularJSを自動テストする

More than 3 years have passed since last update.


gulpとは

Gruntよりもシンプルに書くことができて、動作が早いタスク自動化ツールです。


protractorとは

AngularJSのためのE2E(End to End)テストフレームワークです。


今回のフォルダ構成

├── gulpfile.js

├── index.html
├── node_modules
│   ├── gulp
│   ├── gulp-protractor
│   │      └── protractor
│   ├── gulp-webserver
│   └── run-sequence
└── test
└── e2e
├── config.js
└── spec
└── main.js


必要なパッケージをインストールする

パッケージ名

gulp
gulp本体

gulp-protractor
gulpでprotractorを使うためのパッケージ

gulp-webserver
gulpでwebサーバーを立ち上げるパッケージ

run-sequence
gulpで同期処理を簡単にするパッケージ(便利!)

以下のコマンドでパッケージをインストールします。

npm install --save-dev gulp gulp-protractor gulp-webserver run-sequence


selenium serverとweb driverをローカルに入れる

以下のコマンドを実行します。

node node_modules/gulp-protractor/node_modules/protractor/bin/webdriver-manager update


gulpfile.jsを作成する

webサーバーを立ち上げてテストを実行しています。


gulpfile.js

var gulp = require('gulp');

var runSequence = require('run-sequence');
var protractor = require('gulp-protractor').protractor;
var webserver = require('gulp-webserver');

gulp.task('webserver', function() {
return gulp
.src('')
.pipe(webserver({
host: 'localhost',
port: 8888
}));
});

gulp.task('protractor', function() {
return gulp
.src(['./test/e2e/spec/*.js'])
.pipe(protractor({
configFile: 'test/e2e/config.js',
args: ['--baseUrl', 'http://localhost:8888']
}))
.on('error', function(e) { throw e; });
});

gulp.task('test:e2e', function(callback) {
runSequence(
'webserver',
'protractor',
callback
);
});



config.jsを作成する


test/e2e/config.js

exports.config = {

// バージョンは異なる場合があります
seleniumServerJar: '../../node_modules/gulp-protractor/node_modules/protractor/selenium/selenium-server-standalone-2.44.0.jar',

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

framework: 'jasmine',

jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
}
};



テストされる側のコードを作成する

単純なmyNameyourNameを表示するAngularJSのコードです。


index.html

<html>

<meta charset="utf-8">
<head>
<script type="text/javascript" src="./bower_components/angular/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="sampleController">
<div>
<p>I am <span class="me">{{myName}}</span>.</p>
<p>You are <span class="you">{{yourName}}</span>.</p>
</div>
<script type="text/javascript">
angular
.module('myApp', [])
.controller('sampleController', function($scope) {
$scope.myName = 'John';
$scope.yourName = 'Aki';
});
</script>
</body>
</html>


テストする側のコードを作成する


test/e2e/spec/main.js

describe('gulp-protractor-sample', function() {

beforeEach(function() {
browser.get(browser.baseUrl);
});

it('myName is John', function() {
expect($('.me').getText()).toBe('John');
});

it('yourName is Aki', function() {
expect($('.you').getText()).toBe('Aki');
});

});



gulpを実行する

gulp test:e2e

ブラウザが立ち上がり、テストが実行されます。


テスト結果のログ

Finished in 1.358 seconds

2 tests, 2 assertions, 0 failures


サンプルコード

githubにプロジェクトを作成しました:gulp-protractor-sample


開発環境


  • OS X Yosemite 10.10.2

  • NodeJS 0.10.29

  • gulp 3.8.11

  • gulp-protractor 0.0.12

  • gulp-webserver 0.9.0

  • run-sequence 1.0.2