CasperJS Click on all links matching a selector

Question

I have read this question and its answer, and wish to take it a little bit further.

I want to use CasperJS.click(selector) function to click multiple links matching a selector. Please note that the links do not have a significant href tag.

Consider the following markup:

HTML:

<div>
    <h1 class='myLink'>Cocacola</h1>
    <div>
        <div>
            <h1 class='myLink'>Sprite</h1>
        </div>
    </div>
</div>

The answers I've mentioned on top here suggest deleting the links so we can click the remaining elements with casper.exists and so on. What if I don't want to manipulate the page?

For reasons beyond my conception, using:

document.querySelector("div .myLink:nth-of-type(1)");

catches the first h1, Cocacola. But:

document.querySelector("div .myLink:nth-of-type(2)");

returns null.

Fiddle here.

Any ideas? Many thanks!

possible duplicate of [Click all anchor tags on page with given class, but cancel prior to navigation](http://stackoverflow.com/questions/24603365/click-all-anchor-tags-on-page-with-given-class-but-cancel-prior-to-navigation) — Artjom B., Aug 03 '14 at 09:53
If you don't expect that a new page is loaded then you can use [this](http://stackoverflow.com/a/24451332/1816580). — Artjom B., Aug 03 '14 at 10:04
`nth-of-type` operates only on element types, `h1` in this case. It will not take the class `.myLink` into account. The index only means something for elements directly under the same parent. — Artjom B., Aug 03 '14 at 10:16

score 3 · Answer 1 · edited Aug 03 '14 at 12:50

CSS spec for :nth-of-type says that:

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

That is, the elements will have to be siblings.

For example,

<div>
  <h1 class='myLink'>Cocacola</h1>
  <h1 class='myLink'>Miranda</h1>
  <div>
    <div>
      <h1 class='myLink'>Sprite</h1>
    </div>
  </div>
</div>

The selector div .myLink:nth-of-type(2) will select Miranda. That is, given n siblings of type 'div .myLink', the selector will select the second element from them.

Here is the fiddle for the above example.

Hope this helps!

score 2 · Accepted Answer · answered Aug 03 '14 at 12:58

As mentioned, the reason :nth-of-type(1) works but :nth-of-type(2) doesn't is because there is only exactly one h1 of each type as a child of its parent div. The class selector .myLink is a separate condition entirely and does not affect how :nth-of-type() works.

The reason your first statement appears to return the first element, even though there are technically two elements matching :nth-of-type(1), is because querySelector() returns only the first match.

To obtain the first and second elements matching your selector, use querySelectorAll() instead of querySelector(), and an indexer instead of the :nth-of-type() pseudo-class:

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];

CasperJS Click on all links matching a selector

2 Answers2