PhantomJS and CasperJS not loading JS

Question

I've read this phantomjs not waiting for "full" page load but it didn't solve my issue.

I've tried this (my html, not whole):

<div id="test"></div>


<script>
    window.onload = function() {
        document.getElementById('test').innerHTML = 'something';
        console.log('page loaded');
    };
</script>

And this in my js:

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
    console.log('here i am');
};
page.onLoadFinished =  function() {
    console.log('or here!');
}
page.open('http://localhost:3456/calculatorfixture.html', function (status) {
    waitFor(function _test(){
        return page.evaluate(function() {
            return document.getElementById("test").innerHTML == "something";
        });
    }, function _onReady(){
        console.log ("DONE");
        phantom.exit();
    });
});

I was taking screenshots also - still, nothing. I can't get ANY JS to work on my page. What am I missing?

score 0 · Answer 1 · answered Jun 19 '17 at 21:06

The problem is you're missing the waitFor() function in your JS. I don't think it's built-in to PhantomJS--it's listed in the waitfor.js example code. Once I added that to the JS file, just after the require statement, I got the following output:

here i am
or here!
'waitFor()' finished in 500ms.
DONE

waitFor() code:

/**
 * Wait until the test condition is true or a timeout occurs. Useful for waiting
 * on a server response or for a ui change (fadeIn, etc.) to occur.
 *
 * @param testFx javascript condition that evaluates to a boolean,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param onReady what to do when testFx condition is fulfilled,
 * it can be passed in as a string (e.g.: "1 == 1" or "$('#bar').is(':visible')" or
 * as a callback function.
 * @param timeOutMillis the max amount of time to wait. If not specified, 3 sec is used.
 */
function waitFor(testFx, onReady, timeOutMillis) {
    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000, //< Default Max Timout is 3s
        start = new Date().getTime(),
        condition = false,
        interval = setInterval(function() {
            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {
                // If not time-out yet and condition not yet fulfilled
                condition = (typeof(testFx) === "string" ? eval(testFx) : testFx()); //< defensive code
            } else {
                if(!condition) {
                    // If condition still not fulfilled (timeout but condition is 'false')
                    console.log("'waitFor()' timeout");
                    phantom.exit(1);
                } else {
                    // Condition fulfilled (timeout and/or condition is 'true')
                    console.log("'waitFor()' finished in " + (new Date().getTime() - start) + "ms.");
                    typeof(onReady) === "string" ? eval(onReady) : onReady(); //< Do what it's supposed to do once the condition is fulfilled
                    clearInterval(interval); //< Stop this interval
                }
            }
        }, 250); //< repeat check every 250ms
};

You should update your question to show complete code, as well as expected output. I'm inclined to think you have another problem in your configuration if my local test gives the correct result. Have you verified the contents, behavior, and lack of JS errors at http://localhost:3456/calculatorfixture.html ? Try stripping it down to the essentials and testing again. — Tyler Forsythe, Jun 19 '17 at 21:36

score 0 · Answer 2 · answered Jun 21 '17 at 13:26

It's a bit hard to see the problem without full reproduction, may I suggest you to try out a ready tool? (disclaimer: I made that small library). There's a waitFor built-in https://github.com/javascriptlove/haunt

var page = require('./build/haunt.js');

page.create({ 
        log: true,
        userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36' 
    })
    .get('http://example.com')
    .waitFor(function() {
        return document.getElementById("test").innerHTML == "something";
    })
    .then(function() {
        // other stuff you want to do, this.page refers to the phantom's page object
    })
    .end();

PhantomJS and CasperJS not loading JS

2 Answers2