casperjs/phantomjs how to click an href="javascript:function" and get the resulted content

Question

Im a newbie to phantomjs/casperjs. Im trying to click an href that has a javascript function (href='javascript:getPhoneNumber(....)) and I want to get the printed result which an a png image. here is the html block before the click:

<div class="logo_text_link">

    <img class="logo_text_link" src="//static.awebsite.com/img/devices/mobile/awebsite_mobile_view_phone.png" alt="Telephoner">

    <span id="phoneNumber"><a class="nohistory adview_links" href='javascript:getPhoneNumber("https://api.awebsite.com", 1117004764, "54bb0281238b45a03f0ee695f73e704f")'>See&nbsp;the&nbsp;number&nbsp;</a></span
</div>

and here's the html block after the click:

<div class="logo_text_link">

    <img class="logo_text_link" src="//static.awebsite.com/img/devices/mobile/awebsite_mobile_view_phone.png" alt="Telephoner">

  <span id="phoneNumber"><div class="phoneimg"></div><img class="AdPhonenum" src="https://www.awebsite.com/pg/0f/AxLHLu0zHVAtWTp+nJCc2KkcZTdPfX3CM=.gif"></span>

</div>

I'am aiming at getting the img link (href) using casperjs. Im new to using it so I haven't tried much actually :S

var casper = require('casper').create();
casper.start("http://mobile.awebsite.com/ventes_immobilieres/1117004764.htm?ca=12_s");
var a="dd";
casper.echo('before then');

 casper.then(function() {
        b=casper.click(x('//*[@id="phoneNumber"]/a'));
        casper.evaluate(function() {
             a = getPhoneNumber("https://api.awebsite.com", 1117004764, "54bb0281238b45a03f0ee695f73e704f") ; 
        });
        casper.echo(a);
        casper.echo(b);


});

casper.run();

If anyone know how to get this task done I'd be really grateful (I've been struggling for 2 days now) !

Answer 1

I've made my answer into a long code sample with comments; used a real site to better explain important points. Please be sure to open that site and check what the script does.

var img; // We only really need one variable to get that image address

// Let's create a CasperJS instance that tries (although not fanatically)
// to mimic a browser: it has a real resolution instead of default 400x300 
// and a Chrome useragent (better to use those to not confuse websites into thinking 
// this is a mobile browser with small screen; they could even redirect to a mobile version)
// Of course if you _want_ a mobile version use resolution and useragent of a mob.browser
var casper = require('casper').create({
    pageSettings: {
        userAgent: "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36"
    },
    viewportSize : { width: 1280, height: 1024 },
    verbose: true
});
var x = require('casper').selectXPath;

casper.start("http://www.autreys.com/categories/firearms.html");

casper.then(function() {
    // make screenshots often to check that CasperJS sees what you think it sees
    casper.capture("1-before-click.jpg");    

    // Click on the first button of this type to open a lightbox
    casper.click(x('(//*[@class="QuickViewBtn"])[1]'));
});

console.log("This will be output before everything else because it is not put in the queue like casper.then or casper.wait");

// Give the lightbox some time to load (3 seconds)
casper.wait(3000);

// After that let's get the cover image from the lightbox
casper.then(function() {
    casper.capture("2-after-click.jpg");    
    img = casper.evaluate(function() {
        // This happens "in the browser"
        // You cannot assign local variables like "img" here
        // Just return variables "back"
        return document.querySelector("#QuickViewImage img").src;
    });
    console.log(img);
});

casper.run();