javascript - phantomjs/casperjs 计算 DOM 元素

Question

我想计算具有“nice”类的 div 元素的数量。我有选择器div.nice，但不知道要使用哪个 casperjs 类/方法。

其实有一个tester.assertElementCount方法，但是有什么简单的返回元素个数的方法吗？

Answer 1

只是

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

Answer 2

如果您可以使用 jquery，它相当简单：

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

发现一个SO Post似乎可以解释使用 jquery 和 casperjs，我没有使用 casperjs 的经验，所以在那里我帮不上什么忙。

Answer 3

CasperJS 1.1-beta3 的示例之一涉及检查 CasperJS 的 Google 搜索结果的数量。它引用__utils__.findAll()，它将选择器作为其参数。它允许您使用length任何 JS 对象可用的属性检查返回的项目数：

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

我从未尝试过，但似乎此实用程序函数可以在条件之外使用，并且它允许您在不使用 jQuery 的情况下报告元素的数量，正如先前的答案所推荐的那样。

Answer 4

Casper 提供了getElementsInfo，可以使用属性length来获取元素个数。例如

casper.getElementsInfo('myElement').length

Answer 5

您还可以使用assertElementCount来断言元素的计数

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

Answer 6

我没有发现上面的答案对我的事业有帮助。

我认为目标是计算元素的数量，而不必在页面上下文中评估 js 代码，这可能会令人沮丧加班并且有冲突的变量和函数。

相反，最好利用 casper 自动化上下文。这可以通过 ".exists()" 和 css 伪选择器 ":nth-of-type(i)" 的组合来完成

下面的代码就是这样做的……

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
    }
});

您可以将其设为一个函数并传入所有参数，或者只是将其复制并粘贴为一个步骤。

最好的部分，你可以在它后面加上一个重复语句，以获得一个非常酷的循环。

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