使用单个Gulp任务运行Protractor

Question

Is there a way to run e2e tests using Protractor and Gulp in a single task?

Right now, in order to run e2e tests, I have to open 3 separate shells and run the following:

webdriver-manager update

webdriver-manager start

npm start (which runs the app server)

protractor protractor.conf.js (in a separate window)

There must be a simpler way of running these tests. Any thoughts?

Answer 1

Here is a solution that can work

var protractor = require("gulp-protractor").protractor;
var spawn = require('child_process').spawn; 

//run webdriver method
function runWebdriver(callback) {
    spawn('webdriver-manager', ['start'], {
        stdio: 'inherit'
    }).once('close', callback);
}

//run protractor.config method
function runProtractorConfig() {
    gulp.src('./**/*-page.spec.js')
        .pipe(protractor({
            configFile: 'protractor.config.js'
        }))
        .on('error', function (e) {
            throw e;
        });
}
//execute protractor.config after webdriver is executed
function runWebdriverProtractor(){
    runWebdriver(runProtractorConfig);
}
//put them into gulp task
gulp.task('run-protractor', runWebdriverProtractor);

Answer 2

Yes it's possible.

1. First way: (only for running it from console with simple command " protractor [config file] "

Just run once command with NPM:

npm install protractor@2.5.1
npm install selenium-standalone-jar@2.45.0

This will install required packages.

Next modify the protractor.conf.js with selenium standalone instead of selenium address:

//seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumServerJar: './node_modules/selenium-standalone-jar/bin/selenium-server-standalone-2.45.0.jar',

Now when you run protractor [ config file] like: protractor protractor.conf.js he will start selenium for himself and make tests.

2. Second way:

You can implement that into build process, during build with GULP he will fire for you protractor and protractor will fire up selenium-driver himself.

I see that its really tiring to you to run those command, why would you do that even, just use Gulp to make it for you.

I will explain you this on working example.

All you need is:

Add to your (NPM) package.json file: (pick the version that suits you, this works for me.

"gulp-protractor": "^2.1.0",
"protractor": "2.5.1",
"selenium-standalone-jar": "2.45.0",

Then you need the proper config in protractor.conf.js: You need to replace the "seleniumAddress" with direct JAR file so the protractor will fire it for you and attach to it automaticly! piece of file is:

    framework: 'jasmine',
    //seleniumAddress: 'http://localhost:4444/wd/hub',
    seleniumServerJar: './node_modules/selenium-standalone-jar/bin/selenium-server-standalone-2.45.0.jar',

The seleniumServerJar is a reference path to the file which will be installed with "selenium-standalone-jar": "2.45.0", from your package.json file.

And last step is to properly make a gulp task, here's mine:

var angularProtractor = require('gulp-angular-protractor');
    gulp.task('protractor-test', function(callback) {
        gulp
            .src(['./**/*.js'])  -< 
            .pipe(angularProtractor({
                'configFile': 'protractor.conf.js',
                'debug': true,
                'autoStartStopServer': true
            }))
            .on('error', function(e) {
                console.log(e);
            })
            .on('end', callback);

});

Enjoy!

Answer 3

You can run testsuite as well by just adding --suite in 'args'.

var angularProtractor = require('gulp-angular-protractor');
gulp.task('test', function (callback) {
     gulp
         .src([__dirname+'/public/apps/adminapp/**/**_test.js'])
         .pipe(angularProtractor({
             'configFile': 'public/apps/adminapp/app.test.config.js',
             'debug': false,
             'args': ['--suite', 'adminapp'],
             'autoStartStopServer': true
         }))
         .on('error', function(e) {
             console.log(e);
         })
        .on('end',callback);
});

Answer 4

A complete solution , (working with Travis CI)

1. npm configuration

Basically, configure http-server to start before you run gulp script. Later on you will have to run the tests via npm , fe. npm test or npm run <action> if you choose other name.

"devDependencies": {
  "gulp-angular-protractor": "latest",
  "http-server": "^0.9.0",
  ...
},
"scripts": {
  "pretest": "npm install",
  "test": "(npm start > /dev/null &) && (gulp protractor)",

  "start": "http-server -a localhost -p 8000 -c-1 ./",

  "dev": "(npm start > /dev/null &) && (gulp dev)"
},

2. setup gulp with gulp-angular-protractor

Define the action you want to run.

var gulpProtractorAngular = require('gulp-angular-protractor');
...
gulp.task('protractor', function (callback) {
    gulp
        .src('tests/*.js')
        .pipe(gulpProtractorAngular({
            'configFile': 'protractor.conf.js',
            'debug': false,
            'autoStartStopServer': true,
            'verbose': false,
            'webDriverUpdate': {
                'browsers': ['ie', 'chrome']
            }
        }))
        .on('error', function (e) {
            console.log(e);
        })
        .on('end', callback);
});

---

See the above in action in GitHub project: https://github.com/atais/angular-eonasdan-datetimepicker