CasperJS / PhantomJS ES6 Promise Polyfill

Question

I am currently working on trying to craft end to end tests using PhantomJS and CasperJS. What I've run into is a situation where PhantomJS lacks promises. Currently our project implements them. The application is only used in Google Chrome which supports promises natively.

While running my tests I receive the error: Error: ReferenceError: Can't find variable: Promise

This seems to be because the current version of Webkit in PhantomJS doesn't have support for promises. I realize that SlimerJS does have this support via Gecko however our app runs in Chrome and therefore I would like the tests to occur in Webkit.

What I've been struggling with is injecting a ES6 promise polyfill into Phantom so that the test occurs correctly. I have used both Casper JS's injectjs as well as casper.options.clientScripts.push - both still seem to bring back this lack of support for promises issue.

I've noticed that others stated in CasperJS's github support that they have gotten this to work via polyfill but I'm not sure how they've done this as no examples are provided.

I have included an example of my current script. If anyone has dealt with this issue and found a way to resolve it help would be greatly appreciated. Thank you in advance!

casper.test.begin('Example test loading', 3, function(test) {

    casper.options.clientScripts.push("node_modules/es6-promise/es6-promise.js");

    casper.start('http://localhost:8080/', function() {
        this.captureSelector('stuff.png', 'html');
    });

    casper.on("remote.message", function(msg) {
        this.echo("Console: " + msg);
    });

    casper.on("page.error", function(msg, trace) {
        this.echo("Error: " + msg);
    });

    casper.on("resource.error", function(resourceError) {
        this.echo("ResourceError: " + JSON.stringify(resourceError, undefined, 4));
    });

    casper.on("page.initialized", function(page) {
        page.onResourceTimeout = function(request) {
            console.log('Response Timeout (#' + request.id + '): ' + JSON.stringify(request));
        };
    });

    casper.then(function() {
        test.assertTitle('Example Title', 'Example title is incorrect');
    });

    casper.run(function() {
        test.done();
    });
});

Answer 1

I've stumbled on the same issues of not having proper ES6 support in PhantomJS. I did too attempt to overcome the issue by using es6-promise and, like you, still had undefined Promises.

Replacing it by babel-polyfill resolved the issues.

Once you do

npm install --save-dev babel-polyfill

you can replace clientScripts with

casper.options.clientScripts.push("node_modules/babel-polyfill/dist/polyfill.js")

Note: I have not invested time in understanding why there were problems with es6-promise and the only ES6 feature I have in this codebase are Promises, so IMMV.