Write protractor tests in ES6 #2049

Closed
jonricaurte opened this Issue Apr 15, 2015 · 22 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@juliemr

juliemr Apr 16, 2015

Member

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.

Member

juliemr commented Apr 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 16, 2015

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?

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

This comment has been minimized.

Show comment
Hide comment
@juliemr

juliemr Apr 16, 2015

Member

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.

Member

juliemr commented Apr 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Apr 17, 2015

Ok, that works for me.

Ok, that works for me.

@jamieconnolly

This comment has been minimized.

Show comment
Hide comment
@jamieconnolly

jamieconnolly May 9, 2015

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 👍

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

This comment has been minimized.

Show comment
Hide comment
@datatypevoid

datatypevoid Jul 20, 2015

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

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

@jonricaurte

This comment has been minimized.

Show comment
Hide comment
@jonricaurte

jonricaurte Jul 21, 2015

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

@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

This comment has been minimized.

Show comment
Hide comment
@stringbeans

stringbeans Sep 22, 2015

@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?

@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

This comment has been minimized.

Show comment
Hide comment
@tsubik

tsubik Oct 7, 2015

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

tsubik commented Oct 7, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@PinkyJie

PinkyJie Nov 3, 2015

@tsubik Works for me, thanks!

PinkyJie commented Nov 3, 2015

@tsubik Works for me, thanks!

@dfguo

This comment has been minimized.

Show comment
Hide comment
@dfguo

dfguo Nov 25, 2015

@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?

dfguo commented Nov 25, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@PinkyJie

PinkyJie Nov 26, 2015

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

@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

This comment has been minimized.

Show comment
Hide comment
@vredchenko

vredchenko Dec 16, 2015

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! :)

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

This comment has been minimized.

Show comment
Hide comment
@0xR

0xR Dec 17, 2015

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

0xR commented Dec 17, 2015

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

@0xR

This comment has been minimized.

Show comment
Hide comment
@0xR

0xR Dec 17, 2015

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

0xR commented Dec 17, 2015

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

@nsteenbeek

This comment has been minimized.

Show comment
Hide comment
@nsteenbeek

nsteenbeek Jan 7, 2016

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

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

@PeterStegnar

This comment has been minimized.

Show comment
Hide comment
@PeterStegnar

PeterStegnar Nov 11, 2016

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

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

PeterStegnar commented Nov 11, 2016

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

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

@hirunatan

This comment has been minimized.

Show comment
Hide comment
@hirunatan

hirunatan Dec 7, 2016

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

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

@PeterStegnar

This comment has been minimized.

Show comment
Hide comment
@PeterStegnar

PeterStegnar Dec 7, 2016

@hirunatan no problem, happy to help!

@hirunatan no problem, happy to help!

@CharlieGreenman CharlieGreenman referenced this issue in CharlieGreenman/webpack-angular1.5-razroo Dec 22, 2016

Closed

Add protractor for e2e testing. #3

@adityagautam

This comment has been minimized.

Show comment
Hide comment
@adityagautam

adityagautam Jun 21, 2017

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();
    }

adityagautam commented Jun 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@wswebcreation

wswebcreation Jun 22, 2017

Collaborator

@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?

Collaborator

wswebcreation commented Jun 22, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@geyuqiu

geyuqiu Jun 1, 2018

Since babel 7 it is now

require("@babel/register");

after

npm install --save-dev @babel/register

of course :)

geyuqiu commented Jun 1, 2018

Since babel 7 it is now

require("@babel/register");

after

npm install --save-dev @babel/register

of course :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment