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 cl
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.
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.
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.