Click on all links matching a selector

Asked 29/1, 2013 at 22:46 Answered 8/8, 2016 at 21:58

I have a list of links that I have to simulate a click on using CasperJS. They all share the same class.

However using this.click('.click-me') only clicks on the first link.

What's the proper way of clicking on all the links? I'm thinking that maybe I should try to get the number of links via evaluate() and then use a for loop. But if I use evaluate() with the number of links I have to use messages to communicate back and that seems complicated.

Is there a better way?

Rhizopod answered 29/1, 2013 at 22:46 Comment(0)

I ended up using the nth-child() selector to accomplish this. Here's how...

Page:

<ul id="links">
  <li><a href="#1">1</a></li>  
  <li><a href="#2">2</a></li>  
  <li><a href="#3">3</a></li>  
</ul>

Script:

casper.then(function() {
  var i = 1;
  this.repeat(3, function() {
    this.click('#links li:nth-child(' + i + ') a');
    i++;
  });
});

You obviously don't have to use repeat but any iteration technique should work.

Effect answered 14/2, 2014 at 2:53 Comment(1)

I consider this a better way to go, As you don't need to manipulate/remove elements from the page. Good work! – Wrist 3/8, 2014 at 13:32

As proposed on the CasperJS ML and for the records, here's a possible implementation of clickWhileSelector:

var casper = require('casper').create();

casper.clickWhileSelector = function(selector) {
    return this.then(function() {
        if (this.exists(selector)) {
            this.echo('found link: ' + this.getElementInfo(selector).tag);
            this.click(selector);
            return this.clickWhileSelector(selector);
        }
        return this.echo('Done.').exit();
    });
}

casper.start().then(function() {
    this.page.content =
        '<html><body>' +
        '<a href="#" onclick="this.parentNode.removeChild(this);return false;">link 1</a>' +
        '<a href="#" onclick="this.parentNode.removeChild(this);return false;">link 2</a>' +
        '<a href="#" onclick="this.parentNode.removeChild(this);return false;">link 3</a>' +
        '</body></html>';
});

casper.clickWhileSelector('a').run();

That gives:

$ casperjs c.js
found link: <a href="#" onclick="this.parentNode.removeChild(this);return false;">link 1</a>
found link: <a href="#" onclick="this.parentNode.removeChild(this);return false;">link 2</a>
found link: <a href="#" onclick="this.parentNode.removeChild(this);return false;">link 3</a>
Done.

Seaborg answered 4/2, 2013 at 22:23 Comment(3)

That gives me an infinite loop – Maker 30/4, 2013 at 10:30

It should if there are an infinite amount of selectors to click. It worked nicely for me. – Ser 16/1, 2014 at 22:32

Well this only works, because you remove the clicked element. You wouldn't do this on page where the links don't disappear. For every other page the Grand Master T approach is the way to go. – Footprint 26/4, 2014 at 13:1

Mixing the other responses, to avoid the infinite loop (this worked for me, as my items were consecutive inside a tag):

casper.clickWhileSelector = function(selector, i) {
    return this.then(function() {
        i = i || 1;
        selectorNth = selector+':nth-child(' + i + ')';

        if (this.exists(selectorNth)) {
            this.echo('found link: '+this.getElementInfo(selectorNth).tag);
            this.click(selectorNth);
            return this.clickWhileSelector(selector, i+1);
        }
        return this.echo('Done.').exit();
    });
}

Hope it helps!

Luis.

Selfinductance answered 8/8, 2016 at 21:58 Comment(0)

Recommended topics

Hot tags