Protractor: 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 https://github.com/angular/protractor/issues/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 :+1:

[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.

[vredchenko]

Hi, came here looking for solution to the proper line numbering problem. Just want to confirm that @PinkyJie method of moving babel/register to onPrepare() worked for our project, too. Thanks! :)

[0xR]

For me putting babel/register in onPrepare didn't work. Running protractor 2.2.0.

[0xR]

As a workaround this seems to help: require('babel/register')({retainLines: true});
See https://babeljs.io/docs/usage/options/

[nsteenbeek]

Since Babel 6 you have to use require("babel-core/register")({presets: ["es2015"]}) to get it working.

[PeterStegnar]

require("babel/register"); Is old name.

You should use: require("babel-register");

[hirunatan]

Thanks @nsteenbeek and @PeterStegnar, searched a lot of sites, but this was what i needed. Now it works!

[PeterStegnar]

@hirunatan no problem, happy to help!

[adityagautam]

Can some one tell me what is wrong in my onPrepare function as I am not able to use ES6. Also getting syntax error saying can't use let or arrow functions.

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

       let origFn = browser.driver.controlFlow().execute;

        browser.driver.controlFlow().execute = function () {
            let args = arguments;

            origFn.call(browser.driver.controlFlow(), function () {
                return protractor.promise.delayed(this.delayBrowserTimeInSeconds * 100);
            });

            return origFn.apply(browser.driver.controlFlow(), args);
        };

        browser.driver.manage().window().setSize(window.screen.availWidth, window.screen.availHeight);
        browser.driver.manage().window().maximize();
    }

[wswebcreation]

@adityagautam

You are reacting on a closed issue and secondly asking a question that is not related to Protractor. I don't think it's that wise to do that.

Having said that, your error suggests that you are on a version of node that is equal to 4.x. Protractor requires 6.9 at least. If you upgrade you will see this will solve your initial problem.

Secondly. Are you using babel to transpile your ES6 to ES5? If so, then your code isn;t logic,m because you are running an arrow function (ES6) to call Babel to transpile ES6 to ES5. Or am I wrong?

[geyuqiu]

Since babel 7 it is now

require("@babel/register");

after

npm install --save-dev @babel/register

of course :)