Gulp のコマンドライン引数で Protractor 実行時の設定を変更する

やりたいこと

Gulp のコマンドライン引数で Protractor 実行時の設定を変更したい。

$ gulp test:e2e --env <テスト対象の環境名(必須)> --browser <使用するブラウザ(任意)> --specs <テストファイル名(任意)>

前提条件

以下のライブラリで E2E テストを実装している。

• テストフレームワークは Protractor。
• テストランナーの操作は Gulp。
• (本件と関係ないが) アサーションには mocha + power-assert を使用。
• (本件と関係ないが) テストコードは babel で書いている。

ディレクトリ構造

.
├── package.json
├── env.json
├── gulpfile.js
└── test
    ├── conf.js
    └── specs
        └── login-spec.js

設定ファイル

package.json

package.json

{
  "devDependencies": {
    "babel": "^5.8.23",
    "gulp": "^3.9.0",
    "gulp-protractor": "^1.0.0",
    "minimist": "^1.2.0",
    "mocha": "^2.3.3",
    "phantomjs": "^1.9.18",
    "power-assert": "^1.0.1",
    "protractor": "^2.2.0",
    "underscore": "^1.8.3"
  }
}

gulp の設定

gulpfile.js

'use strict';

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

var args = minimist(process.argv.slice(2));

gulp.task('test:e2e', function() {
  process.env.BROWSER = args.browser;  // 環境変数として渡す(1)
  var protParams = args.env? ['--params.env', args.env]: []; // Protractor のカスタム変数として渡す(2)
  var srcFile = args.specs? [args.specs]: ['./test/specs/*.js']; // ファイル名の指定がなかったら全ファイルをテスト対象にする。
  return gulp
    .src(srcFile)
    .pipe(protractor({
      configFile: './test/conf.js',
      args: protParams
    }))
    .on('error', function(e) { throw e; });
});

Protractor の設定ファイル

conf.js

'use strict';

var _ = require('underscore');
require('babel/register');

var getBrowserType = function() {
  var browserList = ['safari', 'chrome', 'firefox'];
  var browserName = process.env.BROWSER;  // (1) で渡された値
  if (_.contains(browserList, browserName)) {
    return [{
      'browserName': browserName
    }];
  } else {
    return _.map(browserList, function(browser) {  // ブラウザ名の指定がなかったら browserList の全ブラウザをテスト対象にする。
      return { browserName: browser };
    });
  }
};

exports.config = {
  seleniumServerJar: '../node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',

  framework: 'mocha',

  multiCapabilities: getBrowserType(),

  mochaOpts: {
    reporter: 'spec',
    slow: 200000,
    enableTimeouts: false
  },

  onPrepare: function() { 
    browser.ignoreSynchronization = true;
  }
};

テストコード

テスト対象の環境を記述する設定ファイルを用意する。(gulp コマンドライン引数の --env <環境名> で指定される)

env.json

{
  "dev": {
    "HOST": "http://dev.xxx.com/",
    "API": "http://dev-api.xxx.com/"
  },
  "staging": {
    "HOST": "https://stg.xxx.com/",
    "API": "https://stg-api.xxx.com/"
  }
}

テストコード

login-spec.js

'use strict';

let assert = require('power-assert');
const ENV = browser.params.env || 'dev'; // (2) で渡された値
const HOST = require('../../env')[ENV]['HOST'];

describe('Login test', () => {

  beforeEach(() => {
    browser.manage().deleteAllCookies();
  });

  it('login as an existing user', (done) => {
    // given
    // N/A

    // when
    browser.get(HOST)
      .then(() => {
        assert.equal(browser.getCurrentUrl(), HOST + 'login');
        $('input[type=email]').sendKeys('[e-mail]');
        $('input[type=password]').sendKeys('fugafuga');
        element(by.id('login_btn')).click();
      })

    // then
      .then(() => {
        assert.equal(browser.getCurrentUrl(), HOST);
        element.all(by.tagName('h3')).getText().then((data) => {
          assert.equal(data[0], 'hogehoge');
        });        
      })
      .then(done);
  });
});

テスト実行

--env 引数は必須(といいつつない場合は dev 環境)、--browser と --specs は任意の引数にしてない場合は全ブラウザ、全テストファイルを実行、にしている。

$ gulp test:e2e --env dev --browser chrome --specs ./test/specs/login-spec.js
[18:16:21] Using gulpfile ~/xxxxxxx/gulpfile.js
[18:16:21] Starting 'test:e2e'...
Starting selenium standalone server...
[launcher] Running 1 instances of WebDriver
Selenium standalone server started at http://192.168.111.10:58872/wd/hub


  Login test
    ✓ login as an existing user


  1 passing (10s)

Shutting down selenium standalone server.
[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 passed
[18:16:39] Finished 'test:e2e' after 19 s