CasperJS does not trigger properly on callback of dynamic script/link call

Question

I have an issue with Casper JS and a sample html page.

The onLoad event on the external bootstrap call that i added dynamically is not triggered/handled on casper side. In my example, the screenshot will never be red but if i load the page from a browser then the page does look red.

<html>
<head>
<title>Title of the document</title>
</head>
<body>
<script type="text/javascript">
    var s = document.createElement("link");
    s.href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
    s.rel = "stylesheet";
    s.type = "text/css";
    document.body.appendChild(s);
    s.onload = function(){
        document.body.style.backgroundColor = "red";
    };
</script>
</body>
</html>

Here is the file called by casper:

var casper = require('casper').create();

casper.start('test.html', function() {
});

casper.wait(5000, function(){
    casper.capture("debug.png");
});

casper.run(function() {
});

Am I missing something?

score 0 · Answer 1 · edited May 23 '17 at 11:43

PhantomJS (v1.9.7), the underlying headless browser of CasperJS, has the same features as Chrome 13 which, as it seems, does not support onload on link elements. If you need it, you might find here some workarounds.

Otherwise, the following code does what you want:

casper.start('test.html');

casper.waitForResource(/css/, function(){
    this.evaluate(function(){
        document.body.style.backgroundColor = "red";
    });
    this.capture("debug.png");
});

You can use --enginge=slimerjs with http://slimerjs.org/ to run the gecko engine from your installed firefox.

On an unrelated note. link elements are better suited in the head instead of body.

CasperJS does not trigger properly on callback of dynamic script/link call

1 Answers1