CasperJS Invoke Javascript function on browser console

Question

I am trying to invoke a Javascript method using CasperJS. The web page simply consist of a link that allows me to change back to my default country.

<a id="defaultCountry" href="javascript:__doPostBack('cty$UK$default','')">Default Country</a>

I want CasperJS to invoke the Javascript method that is called after clicking the link. I assumed that mimicking a mouse click on the link would invoke the Javascript method but it doesn't. I've tried the following methods with no success:

 casper.then(function() {
        casper.click(x('//*[@id="defaultCountry"]'));
        casper.evaluate(function() {
              __doPostBack('cty$UK$default',''); //this is the javascript function. im not sure if thats how you would call it though
        });

or

this.clickLabel('Default Country', 'a');

I know that if I invoke the Javascript function on the browser console, it will work. I simply type:

__doPostBack('cty$UK$default','');

in the console and it magically works. Any help appreciated!

Edit:

@Rippo This is a snippet of what I ran. It seems like CasperJS bypasses my eval statement. The last few lines are from the console directly. I know my page loads with the selector because of the screenshot. I've even used the casper.waitforselector method to confirm.

casper.thenOpen('http://example.com');

casper.wait(5000, function() {
    console.log('page opened');
    casper.capture('page.png');
    console.log('capture page complete');
});

casper.thenEvaluate(function() {
    console.log('invoking javascript');
    __doPostBack('cty$UK$default','');
    console.log('javascript invoked');
});

This is from the console:

[info] [phantom] wait() finished waiting for 5000ms.
page opened
[debug] [phantom] Capturing page to C:/Users/page.png
[info] [phantom] Capture saved to C:/Users/page.png
capture page complete
[info] [phantom] Step _step 8/8 http://example.com (HTTP 200)
[info] [phantom] Step _step 8/8: done in 16240ms.
[info] [phantom] Done 8 steps in 16259ms
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "about:blank"

This is the last line from the console before it exits.

Edit 7/17/2016 12:40AM

@Artjom B. Here's a snippet of the code I ran with your suggestions:

...snipped some prior    
function() {
    console.log('Page loaded');
    casper.capture('page.png');
    console.log('Starting 1st postback call');
    this.evaluate(function() {
        console.log('postback call');
         __doPostBack('cty$UK$default','');
        });
    console.log('passed postback');
    casper.capture('post-postback.png');

//At this point, it skips this function and goes straight to console.log then comes back to this function. Not sure why...
casper.then(function() {
    console.log('trying to change again');
    this.click(x('//*[@id="defaultCountry"]'));
    this.evaluate(function() {
        __doPostBack('cty$UK$default','');
        console.log('javascript invoked');
    });
});

//skipped to this console.log
console.log('waiting country to change');
this.waitForSelector('.countryuk', 
    function() {
        console.log('country change completed. Capturing image');
        this.capture('uk.png');
    },

    function() {
        console.log('timed out waiting for country to change.');
        this.capture('uk-timeout.png');
    },5000);

};

Here is the console output:

Page loaded
[debug] [phantom] Capturing page to C:/Users/page.png
[info] [phantom] Capture saved to C:/Users/page.png
Starting 1st postback call
Console: postback call
Error: ReferenceError: Can't find variable: __doPostBack
passed postback
[debug] [phantom] Capturing page to C:/Users/post-postback.png
[info] [phantom] Capture saved to C:/Users/post-postback.png
waiting country to change
[info] [phantom] Step anonymous 10/11 http://example.com/page.aspx?r=2 (HTTP 200)
trying to change again
[debug] [phantom] Mouse event 'mousedown' on selector: xpath selector: //*[@id="defaultCountry"]
[debug] [phantom] Mouse event 'mouseup' on selector: xpath selector: //*[@id="defaultCountry"]
[debug] [phantom] Mouse event 'click' on selector: xpath selector: //*[@id="defaultCountry"]
Error: ReferenceError: Can't find variable: __doPostBack
Error: ReferenceError: Can't find variable: __doPostBack
[info] [phantom] Step anonymous 10/11: done in 22567ms.
[info] [phantom] Step _step 11/11 http://example.com/page.aspx?r=2 (HTTP 200)
[info] [phantom] Step _step 11/11: done in 22573ms.
[warning] [phantom] Casper.waitFor() timeout
timed out waiting for country to change.
[debug] [phantom] Capturing page to C:/Users/uk-timeout.png
[info] [phantom] Capture saved to C:/Users/uk-timeout.png
[info] [phantom] Done 11 steps in 27825ms
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "about:blank"

Clearly it cant find the postback function. I'm not sure why though. It's not a hidden element. It's exactly as I posted above (a link). It's nested within a bunch of div tags but that's about it.

I've seen similar issues with the postback calls My issue is that Casperjs doesnt process my eval function and I'm not sure why. https://stackoverflow.com/questions/25107976/cannot-navigate-with-casperjs-evaluate-and-dopostback-function https://stackoverflow.com/questions/17830597/casperjs-how-to-call-dopostback — kubermeso, Jul 16 '16 at 14:40
Welcome to Stack Overflow! Which PhantomJS version do you use? Please register to the `resource.error`, `page.error`, `remote.message` and `casper.page.onResourceTimeout` events ([Example](https://gist.github.com/artjomb/4cf43d16ce50d8674fdf#file-2_caspererrors-js)). Maybe there are errors. — Artjom B., Jul 16 '16 at 19:14
You haven't answered my first question. Anyway, you have to find out why the request that loads the `__doPostBack` function isn't being loaded. Is it an HTTPS request? — Artjom B., Jul 17 '16 at 08:26

score 1 · Answer 1 · answered Jul 16 '16 at 07:46

1

what about just (remove casper.then and casper.click)

 casper.thenEvaluate(function() {
       __doPostBack('cty$UK$default',''); 
 });

answered Jul 16 '16 at 07:46

Rippo

22,117
14
78
117

as a side note `console.log('invoking javascript');` inside evaluate with echo to the web browsers console not the command console you run it from. I wonder if the JS has finished loading? I suspect you have an JS error somewhere on page. See @artjom comment – Rippo Jul 18 '16 at 15:01

afuous · Answer 2 · 2016-07-17T03:30:38.313

0

You can access the href of the link and use the eval function.

var str = document.getElementById("defaultCountry").href;
eval(str.substring(str.indexOf(":") + 1));

edited Jul 17 '16 at 03:30

answered Jul 16 '16 at 03:54

afuous

1,478
10
12

Once I declar var str, CasperJS breaks out. I put console.log prior and after your code. It would interpret the console.log prior but not after. – kubermeso Jul 16 '16 at 05:58
@kubermeso What do you mean "breaks out"? Where are you putting the declaration and eval call? – afuous Jul 16 '16 at 06:01
Please see my edit above. I put your statements within the casper.thenEvaluate function. I've also ttried it with casper.wait. Neither work and casperjs just bypasses the code – kubermeso Jul 16 '16 at 14:24
`"defaultValue"` is nowhere to be found in the question and your code contains a syntax error. There is a `)` missing – Artjom B. Jul 16 '16 at 19:14
@ArtjomB. afuous: I put your statement in after my console.log('Starting 1st postback call'). It breaks the script. Here's the last few lines from my console: Starting 1st postback call [info] [phantom] Done 9 steps in 22260ms [debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true [debug] [phantom] url changed to "about:blank" – kubermeso Jul 17 '16 at 04:51
PhantomJS is perfectly capable of executing such href code. There is no need to `eval` it. – Artjom B. Jul 17 '16 at 08:29

CasperJS Invoke Javascript function on browser console

2 Answers2