Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Write protractor tests in ES6 #2049

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

Write protractor tests in ES6 #2049

jonricaurte opened this issue Apr 15, 2015 · 22 comments

Comments

@jonricaurte
Copy link

@jonricaurte jonricaurte commented Apr 15, 2015

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
Copy link
Member

@juliemr 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
Copy link
Author

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

@juliemr
Copy link
Member

@juliemr 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
Copy link
Author

@jonricaurte jonricaurte commented Apr 17, 2015

Ok, that works for me.

@jamieconnolly
Copy link

@jamieconnolly jamieconnolly commented 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 👍

@datatypevoid
Copy link

@datatypevoid datatypevoid commented Jul 20, 2015

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

@jonricaurte
Copy link
Author

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

@stringbeans
Copy link

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

@tsubik
Copy link

@tsubik 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
Copy link

@PinkyJie PinkyJie commented Nov 3, 2015

@tsubik Works for me, thanks!

@dfguo
Copy link

@dfguo 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
Copy link

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

@vredchenko
Copy link

@vredchenko vredchenko commented 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! :)

@0xR
Copy link

@0xR 0xR commented Dec 17, 2015

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

@0xR
Copy link

@0xR 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
Copy link

@nsteenbeek nsteenbeek commented Jan 7, 2016

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

@PeterStegnar
Copy link

@PeterStegnar PeterStegnar commented Nov 11, 2016

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

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

@hirunatan
Copy link

@hirunatan hirunatan commented Dec 7, 2016

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

@PeterStegnar
Copy link

@PeterStegnar PeterStegnar commented Dec 7, 2016

@hirunatan no problem, happy to help!

@adityagautam
Copy link

@adityagautam 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
Copy link
Collaborator

@wswebcreation 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
Copy link

@geyuqiu 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.