Menu
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?
403
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.
192
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.
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
