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

  • 13
    Like
  • 0
    Comment
More than 1 year has 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