phantomjs/casperjs count DOM elements

Question

I would like to count the number of, let's say, div elements with 'nice' class. I've got the selector div.nice, but don't know which casperjs class/method to use.

There is a tester.assertElementCount method in fact, but is there anything that simply returns the number of elements?

I think you have to create your own function for this. It looks like the easiest way t do this is to check if the element exists and use the css ":nth-of-type(i)". I posted an answer below for this. — , Feb 10 '17 at 05:42

score 5 · Answer 1 · 2015-06-29T03:05:09.937

5

Just

document.querySelectorAll("div.nice").length

edited Jun 29 '15 at 03:05

answered Aug 05 '13 at 16:46

hmm, so I don't have to do it inside `evaluate` function? – ducin Aug 06 '13 at 19:44
No, this is the `document` within the page evaluation context. – Aug 10 '13 at 03:14
7

This returns `0` for me. – StockB Nov 26 '15 at 21:25

score 4 · Accepted Answer · edited May 23 '17 at 12:10

4

If you can use jquery its fairly simple:

var count = $('div.classname').length;

Found an SO Post that seems to explain using jquery with casperjs, I have no experience with casperjs so I can't help much there.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 05 '13 at 15:37

Jake Sellers

2,350
2
21
40

`FAIL ReferenceError: Can't find variable: $`. how can I "install" jquery into casperjs? – ducin Aug 05 '13 at 15:38

score 3 · Answer 3 · answered Mar 05 '14 at 05:38

3

One of the examples for CasperJS 1.1-beta3 involves checking the number of Google search results for CasperJS. It references __utils__.findAll(), which takes a selector as its argument. It allows you to check the number of items returned using the length property available to any JS object:

test.assertEval(function() {
  return __utils__.findAll("h3.r").length >= 10;
}, "google search for \"casperjs\" retrieves 10 or more results");

I've never tried it, but it seems like this utility function can be used outside a conditional, and it will allow you to report the number of elements without using jQuery, as a previous answer recommended.

answered Mar 05 '14 at 05:38

Chris Ruppel

809
14
21

However, the `__utils__` functions are injected _in the remote DOM environment_, so they can only be accessed inside a function passed as a parameter to `casper.evaluate()` or `test.assertEval()`. – lfurini Jan 08 '16 at 11:08
1

Yes that's right. What I meant is that using `__utils__` outside a conditional is just fine (i.e. as a general logging/debugging mechanism). I didn't mean to imply you could use it outside the `evaluate` or `assertEval` blocks. Can I update my answer somehow to make it clearer? – Chris Ruppel Jan 09 '16 at 05:19
1

Maybe you could add a little example, like this one: `var count = this.evaluate(function() {return __utils__.findAll("h3.r").length;});` – lfurini Jan 09 '16 at 08:03

Stratos Ion · Answer 4 · 2016-08-17T13:50:14.890

3

Casper provides getElementsInfo, you can use the attribute length to get the number of elements. e.g.

casper.getElementsInfo('myElement').length

edited Aug 17 '16 at 13:50

answered Aug 16 '16 at 13:49

Stratos Ion

504
3
18

score 0 · Answer 5 · answered Jul 15 '14 at 05:32

0

you also can use assertElementCount to assert the count of the elment

test.assertElementCount("div.nice", 1)

answered Jul 15 '14 at 05:32

xinquan

9
1

This does not answer the question "how can I count these elements". – lfurini Jan 08 '16 at 11:02

score 0 · Answer 6 · 2017-02-10T05:45:14.663

I did not find the answers above to be helpful to my cause.

I think the goal was to count the number of elements without having to evaluate the js code in the page context, which could be frustrating overtime and have conflicting variables and functions.

Instead, it would be nice to leverage the casper automation context. This can be done with a combination of ".exists()" and the css psuedo-selector ":nth-of-type(i)"

The code below does this...

var counter = 1;          //set to one, for css selector setup

casper.then(function() {  //wait your turn
    //loop through our element
    while(casper.exists( 'div span:nth-of-type(' + counter + ')' )) {
        counter++;        //count the results
    }
});

You could make this a function and pass in all the arguments, or just copy and paste it as a step.

Best part, you could follow it with a repeat statement for a pretty cool loop.

casper.then(function(){
    this.repeat(counter, function() {
        console.log("Another one - item #" + counter);
    });
});

phantomjs/casperjs count DOM elements

6 Answers6