点击 <img role=“button” …> 通过casperjs

Question

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.

Answer 1

You should try the approach suggested on the casperjs documentation :

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

casper.then(function() {
    // do next action
});

Answer 2

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();