Click on second element with CasperJS - xpath

Question

I want to use CasperJS to click over the second element in a document.
My Document:
<div class="sample secondClass">1</div>
<div class="sample">2
<ul class="ul">
<li class="li">
<a class="link">
<div class="div_msg">
<span>AbCde</span>
</div>
</a>
</li>
</ul>
<div class="sample secondClass">3</div>
This is what I have tried:
casper.thenClick(x('//*[#class="sample"][2]/ul[#class="ul"]/li[#class="li"]/a[#class="link"]/div[#class="div_msg"]/span[string-length(text())="ABCDE"]'), function() {
...
//do anythings
...
}

Answer 1

x(...) is a convenience function to use XPath expressions with almost all CasperJS functions instead of CSS selectors. :nth-child(1) is a CSS selector, that doesn't work in XPath expressions.
You can select the position of an element among its matched siblings with [x]. If you want the second element, then use x('//*[#class="sample"][2]') (XPaths and CSS selectors are 1-indexed and not 0-index like basically all other programming languages).
colorMatchingRed('//*[#class="sample"][2]')
function colorMatchingRed(xpath) {
var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}
<div>
<div class="sample">No</div>
<div class="sample">Yes</div>
<div class="sample">No</div>
</div>
<hr/>
<div>
<div>No</div>
<div class="sample">No</div>
<div class="sample">Yes</div>
<div class="sample">No</div>
</div>
You can also use x('//*[#class="sample" and position()=2]') which has a slightly different meaning, because it matches the second element among its siblings that also has a specific #class attribute.
colorMatchingRed('//*/*[#class="sample" and position()=2]')
function colorMatchingRed(xpath) {
var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}
<div>
<div class="sample">No</div>
<div class="sample">Yes</div>
<div class="sample">No</div>
</div>
<hr/>
<div>
<div>No</div>
<div class="sample">Yes</div>
<div class="sample">No</div>
<div class="sample">No</div>
</div>
If the elements are not siblings of one another, then you can also evaluate the node set and select a specific element from that set: x('(//*[#class="sample"])[2]'). It creates a set of all elements with that specific #class and chooses the second one.
colorMatchingRed('(//*[#class="sample"])[2]')
function colorMatchingRed(xpath) {
var spans = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0 ; i < spans.snapshotLength; i++ ) spans.snapshotItem(i).style.color = "red";
}
<div>
<div class="sample">No</div>
<div class="sample">Yes</div>
<div class="sample">No</div>
</div>
<hr/>
<div>
<div>No</div>
<div class="sample">No</div>
<div class="sample">No</div>
<div class="sample">No</div>
</div>
Here's the correct click call for the updated question:
casper.thenClick(x('//*[#class="sample"][2]/ul[#class="ul"]/li[#class="li"]/a[#class="link"]/div[#class="div_msg"]/span[string-length(text())=string-length("ABCDE")]'), ...)
or shorter:
casper.thenClick(x('//*[#class="sample"][2]//div[#class="div_msg"]/span[string-length(text())=string-length("ABCDE")]'), ...)