0

Trying to click the below element via casperjs, but it's not working for me.

<img alt="Pay Button" class="v-button" role="button" src="https://test/wallet-services-web/xo/button.png" tabindex="0" style="cursor: pointer; transition-property: filter; transition-duration: 0.25s; filter: brightness(1);">

I am searching for this element through a bunch of nested iframes, and I can find it correctly -- but I can't seem to click on it correctly. 

    if (casper.exists('img.v-button')) {
        console.log("Found button"); // the exists works - this is logged

        casper.click('img.v-button'); // Approach 1: nothing happens

        // Approach 2: nothing happens
//      var x = require('casper').selectXPath;
//      casper.click(x('(//img[@class="v-button"])'));

        return true;
    } else {
        var result = traverseTreeDown();
        if (result) {
            return true;
        } else {
            casper.page.switchToParentFrame();
        }
    }

Both approach 1 and 2 doesn't work to click - even though I do get inside the "exists" block correctly.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
Phoeniyx
  • 542
  • 4
  • 15
  • this is maybe because casper is **async**. I think you're returning `true` from the function before the click has been handled. try wrapping in in a `setTimeout(() => casper.click(img), 0)`. – Todd Apr 26 '17 at 07:25
  • Interesting point - will give it a try and post back. So, when you are "inside" a single "casper.then(function()" block, we cannot assume strict ordering to completion of the instructions? if we need strict ordering of two commands all the way to completion, they need to be in consecutive but separate "casper.then(function()" blocks? Alternatively, create a seperate thread via timeout as you suggested... – Phoeniyx Apr 26 '17 at 13:32

2 Answers2

0

You should try the approach suggested on the casperjs documentation:

casper.then(function() {
    casper.click('img.v-button');
});

casper.then(function() {
    // do next action
});
AlexD
  • 4,062
  • 5
  • 38
  • 65
  • Oh, my code snippet above is already in a "casper.then(function() {" block. I just didn't include it for brevity. What I posted was the inside of the "casper.then(function() {" block. – Phoeniyx Apr 26 '17 at 13:33
0

I recommend checking out the API documentation.

For instance, check this out: you can wait for a specific selector to be present.

casper.start('https://yourmom.gov');

casper.waitForSelector('img.v-button', function() {
    this.click('img.v-button');
});

casper.run();

or there's an alternative way-- I think better

casper.start('http://yourmom.gov/').thenClick('img.v-button', function() {
    this.echo("clicktastic.");
});

casper.run();
Todd
  • 5,314
  • 3
  • 28
  • 45
  • Thx.. But as I mentioned the element is already there. My first line of code is "if (casper.exists('img.v-button')) {".. It exists, since my console.log prints correctly. But once in the block, the click doesn't work. If element didn't exist, I wouldn't get in the block in the first place and my console.log wouldn't be printed. So, nothing to "WaitFor" would imagine. – Phoeniyx Apr 28 '17 at 06:47