Write protractor tests in ES6

[jonricaurte]

Hi,

Saw there was discussion about using coffeescript to write protractor tests, however, I didn't see any that involved ES6. I see the current pattern is to write tests in ES6 and have a gulp task compile them into a separate directory and then have protractor use the compiled files for testing. It would be nice to have something similar to karma-babel-preprocessor to write tests with where we don't need a gulp task.

Thanks.

[juliemr]

See also #1214

Many ES6 features are already available in node, provided you have the right flags. What features, specifically, are you looking for? I wonder if the ideal way to do this is to wait for es6 features to hit node so that compilation can be avoided altogether.

[jonricaurte]

I was looking to use classes and arrow functions, which don't seem to be stable. Since coffeescript seems to be supported out of the box, is it possible to have ES6 also be supported by using babel or traceur?

[juliemr]

I'd prefer not to build preprocessors in to the core framework - I think doing this as a gulp task makes the most sense for now.

[jonricaurte]

Ok, that works for me.

[jamieconnolly]

Stumbled across this issue after finding my own solution for the same thing. It seems my (somewhat basic) needs are fulfilled by adding require('babel/register'); to the prototractor configuration file. I can then use ES6 to write my tests 👍

[datatypevoid]

@jamieconnolly Your solution works perfectly for my end to end testing needs. Thanks!

[jonricaurte]

@jamieconnolly Thanks for the tip! I totally forgot about doing it this way; this is how we used to have to do it for running coffeescript tests before it was built in.

[stringbeans]

@jamieconnolly that method allows us to use ES6 to write our tests, however if there are any errors it doesn't report the line numbers correctly. Do you know how to utilize source maps in this case?

[tsubik]

@stringbeans I've also had the same problem. require('babel/register') generates and installs source maps by itself, but everything is done on the fly. Protractor also try to install source maps, but checking source files from disk which are not changed at all. Looks like this line overrides good source maps loaded by require('babel/register') so as a workaround I'm invoking that hook later in onPrepare function.

exports.config = {
    framework: "jasmine2",
    baseUrl: "http://localhost:4200",
    seleniumAddress: "http://localhost:4444/wd/hub",
    specs: ["integration/**/*.js"],
    capabilities: {
        "browserName": "chrome"
    },
    onPrepare: function () {
        require("babel/register");
    }
};

Other option could be add some config for protractor to disable loading source maps.

[PinkyJie]

@tsubik Works for me, thanks!

[dfguo]

@tsubik i still couldn't get proper line number after moving require("babel/register"); to onPrepare. Did you manage to get it working for you?

[PinkyJie]

@dfguo My full protractor.config.js is here https://github.com/PinkyJie/angular1-webpack-starter/blob/master/protractor.config.js, check this to see if it could help.