Preprocess e2e tests' files (ES6 styling) for Protractor using webpack

Question

I'm using

1. React: application
2. npm: package manager
3. mocha/chai/sinon: unit test
4. protractor: e2e testing

in my application. The entire application is written with ES6, but the e2e tests are plain javascript. I would like to use ES6 styling for my e2e tests files as well, but the issue that I am facing is to preprocess or compile the ES6 files to plain javascript and then run the protractor agains compiled files. Can anyone please point how to use webpack with babel to convert those ES6 files into plain javascript?

here is my protractor.conf.js:

/*eslint-disable no-var*/
'use strict';

exports.config = {
  specs: ['../tests/e2e/**/*.js'],
  capabilities: {
    browserName: 'chrome'
  },
  baseUrl: 'http://localhost:3000',
  frameworks: ['mocha', 'chai'],
  onPrepare: function() {
    browser.ignoreSynchronization = true;
  }
};

and a simple test:

/*eslint-disable no-var*/
'use strict';

var chai = require('chai');
var sinon = require('sinon');
var sinonChai = require('sinon-chai');

var expect = chai.expect;
chai.use(sinonChai);

describe('app login flow', function() {

  var loginUrl, homeUrl;

  it('sets up initial variables', function() {
    browser.get('/teams');
    loginUrl = browser.getCurrentUrl();

    browser.sleep(6000).then(function() {
      homeUrl = browser.getCurrentUrl();
      expect('1').to.equal('1');
    })
  });
});

Answer 1

The problem was solved simply by adding require('babel/register'); at the very top of the protractor.conf.js file. for more info check this issue on github

So the protractor.conf.js now looks like this:

/*eslint-disable no-var*/
'use strict';

require('babel/register');

exports.config = {
  specs: ['../tests/e2e/**/*.js'],
  capabilities: {
    browserName: 'chrome'
  },
  baseUrl: 'http://localhost:3000',
  frameworks: ['mocha', 'chai'],
  onPrepare: function() {
    browser.ignoreSynchronization = true;
  },

};

and the test files now can be written in ES6.

/*eslint-disable no-var*/
'use strict';

import chai from 'chai';
import sinon from 'sinon';
import sinonChai from 'sinon-chai';

let expect = chai.expect;
chai.use(sinonChai);

describe('app login flow', () => {
  let loginUrl, homeUrl;
  it('sets up initial variables', () => {
    browser.get('/teams');

    browser.sleep(6000).then(() => {
      expect('1').to.equal('1');
    })
  });
});

PS. a good reference for making protractor to work with ReactJs: Testing React apps with Protractor by Joel Auterson

UPDATE

Just in case anyone reads the link at the bottom of this answer - I wrote that post a while ago, and it's now a little out of date. :) ExpectedConditions is probably what you want! – Joel Auterson

Answer 2

I know this question is old, but to update it I want to mention that since protractor was written on Node you can now use ES6 with it without any tweaks in conf file, you just need to use Node >= 4. However some of the features(let, classes) require strict mode.

For more information about supported ES6 features you can check this page https://nodejs.org/en/docs/es6/

Answer 3

For Babel 6 version put following at the top (or in onPrepare) of the protractor.conf.js:

require("babel-core/register")({
    presets: [
        "es2015"
    ]
});