CasperJS click() doesn't load new html

Question

I'm trying to use CasperJS' click() to follow a link which generates a modal on the current screen. When I query the proper selector and click it in the browser console using document.querySelector().click() it works, but even when I casper.evaluate() this it doesn't work. I found someone who had a very similar problem, but his question remains unanswered, and I am experiencing almost identical problems. casperjs button click doesn't navigate to next page the code I'm currently using is

this.waitForSelector('div.talk-sharing__tools a.rate-button', function() {
    this.then(function() {
        this.evaluate(function() {
            document.querySelector('a.rate-button').click();
});

the page I'm trying to scrape is http://www.ted.com/talks/uri_alon_why_truly_innovative_science_demands_a_leap_into_the_unknown

Answer 1

It is really impossible to do those navigation steps with the phantomjs engine. It seems that the QtWebkit fork of phantom (version 1.9.7) is not up to the task anymore. Although your code works fine as is with slimerjs. You can comfortably install slimerjs through npm:

npm install -g slimerjs

and run your script with

casperjs --engine=slimerjs script.js

---

I tried several things with phantomjs that did not work. I added casper.on listeners for remote.message and resource.error, but those didn't show any errors when running the script in phantom. logLevel: "debug" also didn't show anything.

First: Using a casperjs function.

casper.thenClick("div.talk-sharing__tools a.rate-button");

Second: Trying to explicitly show the modal for the button (specific to the page).

casper.then(function(){
    var name = this.evaluate(function(){
        var modal = document.querySelectorAll(".modal-wrapper > .modal")[0];
        modal.className += " modal--show";
        return modal.className;
    });
    this.echo("name: "+name); // null
});

casper.waitUntilVisible(".modal__head__title");

Third: Let jQuery do the work.

var casper = require('casper').create({
    remoteScripts: [ "http://code.jquery.com/jquery-1.11.1.min.js" ]
});

casper.waitForSelector(selector, function() {
    this.evaluate(function() {
        jQuery("a.rate-button").click();
    });
});

Answer 2

Encountered similar issue today. After executing this.click() on start page (which I verified that PhantomJS is executing - by hooking into resource.requested and resource.received events), current page remained on start page (and it should go to clicked link page).

Solution was to update to the latest PhantomJS (1.9.8 at this moment).

Please note that I had PhantomJS 1.9.7 when the above described problem occurred.