phantomjs/casperjs 计算 DOM 元素答案

【问题标题】：phantomjs/casperjs count DOM elementsphantomjs/casperjs 计算 DOM 元素
【发布时间】：2013-08-05 15:33:08
【问题描述】：

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

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

【问题讨论】：

我认为你必须为此创建自己的函数。看起来最简单的方法是检查元素是否存在并使用 css ":nth-of-type(i)"。我在下面发布了一个答案。

【解决方案1】：

只是

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

【讨论】：

嗯，这样我就不用在evaluate函数里面做了？
不，这是页面评估上下文中的document。
这会为我返回0。

【解决方案2】：

如果你可以使用 jquery 就相当简单了：

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

找到了一个SO Post，它似乎解释了将 jquery 与 casperjs 一起使用，我没有使用 casperjs 的经验，所以我帮不上什么忙。

【讨论】：

FAIL ReferenceError: Can't find variable: $。如何将 jquery“安装”到 casperjs 中？

【解决方案3】：

CasperJS 1.1-beta3 的一个示例涉及checking the number of Google search results for CasperJS。它引用__utils__.findAll()，它将选择器作为其参数。它允许您使用可用于任何 JS 对象的length 属性检查返回的项目数：

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

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

【讨论】：

然而，__utils__ 函数被注入在远程 DOM 环境中，因此它们只能在作为参数传递给 casper.evaluate() 或 @987654327 的函数内部访问@.
是的，没错。我的意思是在条件之外使用__utils__ 就可以了（即作为一般的日志记录/调试机制）。我并不是要暗示你可以在evaluate 或assertEval 块之外使用它。我可以以某种方式更新我的答案以使其更清楚吗？
也许你可以添加一个小例子，比如这个：var count = this.evaluate(function() {return __utils__.findAll("h3.r").length;});

【解决方案4】：

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

casper.getElementsInfo('myElement').length

【讨论】：

【解决方案5】：

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

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

【讨论】：

这并没有回答“我如何计算这些元素”的问题。

【解决方案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);
    });
});

【讨论】：