0

I have this script for testing the jquery click() capability within phantomJS.

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

address="https://jsfiddle.net/t8atxcfL/";

page.onConsoleMessage = function(msg) {
  console.log('eval- ' + msg);
};
page.open(address, function(status){

    if(status==="success"){
        console.log("Page loaded");

        page.viewportSize={width:1920, height:1080};
        page.render("before.png");

        page.includeJs("//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function(){
            console.log("executing jquery");
            var toFocus = page.evaluate(function(){
                console.log("getting iframe name...")
                return document.getElementsByTagName("iframe")[0].name;
            });
            page.switchToFrame(toFocus);

            page.evaluate(function() {
                console.log($("#par").text());
                $("#par").click();
                console.log($("#par").text());
            });

            page.viewportSize={width:1920, height:1080};
            page.render("after.png");

            phantom.exit();
        });

    }
});

This version seems to work fine, the output being:

user@home$ phantomjs chooseframe.js 
Page loaded
executing jquery
eval- getting iframe name...
eval- 
Before clicking...

eval- I was clicked

The problem is when I replace $("#par").click(); with $("#par").click(function(){console.log("I am now clicking")});

Then, the output becomes

user@home$ phantomjs chooseframe.js 
Page loaded
executing jquery
eval- getting iframe name...
eval- 
Before clicking...

eval- 
Before clicking...

The issue is that even if the callback function is empty, like $("#par").click(function(){}); and even if I remove the phantom.exit() line the output stays the same no matter how long I wait.

Could anybody please tell me how to make .click() work the intended way, or why it could not work?

user2565010
  • 1,876
  • 4
  • 23
  • 37

1 Answers1

1

$("#par").click(); triggers the existing click handler for the link, whereas your later example sets a new click handler, but doesn't click the element to trigger the click handler.

Simply make sure you click after adding the click handler:

$("#par").click(function() {
    console.log("I am now clicking");
});
$("#par").click();
jedifans
  • 2,287
  • 1
  • 13
  • 9
  • Oh, that makes sense. I'm having a lot of trouble with phantomJS's not clicking with jquery and, around here, there seems to be no solution that actually uses the click() method from jquery. Kind of an anticlimactic solution this question had. – user2565010 Aug 31 '16 at 12:34
  • Don't worry! You can always execute your scripts in a real browser too to compare your expected behaviour. As a side note have you considered using CasperJS? It has a nicer API and simply wraps around phantomjs. – jedifans Aug 31 '16 at 12:36
  • I am always trying that, but that particular function does not seem to be working. For instance, check this question out: http://stackoverflow.com/questions/23981467/phantomjs-click-not-working There is no answer or comment explaining how to make click to work in that instance, or whether or not it is supposed to work at all. As for CasperJS, I'll give it a shot, maybe it handles some of that nonsense about phantom. – user2565010 Aug 31 '16 at 15:06