在CasperJS中获取具有特定(数据)属性的每个元素

Question

我正在尝试使用CasperJS测试页面.是否有可能获得包含属性数据-...的每个元素(段落)？之后,我需要将此属性与内部HTML进行比较,但我不知道该怎么做.

Answer 1

首先,您需要检索您感兴趣的所有元素的表示.这可以通过以下方式完成casper.getElementsInfo(selector):

var elements = casper.getElementsInfo("p[data-whatever]");

这将为您提供<p>页面上具有data-whatever属性集的所有元素.如果要根据data-whatever属性值对其进行过滤,则需要根据需要使用属性选择器.

该getElementsInfo()函数包含非常有用的信息,但不包含您要使用的实际元素.它只包含一个表示为数组.

您可以迭代这些元素表示并对它们运行操作.你说你想"将这个属性与内部HTML进行比较".这可以通过这种方式完成:

elements.forEach(function(element){
    if (element.attributes["data-whatever"] === element.html) {
        casper.echo("data attribute and content are exactly equal");
    } else {
        casper.echo("data attribute and content are different");
    }
});

请记住,您可以直接使用普通的DOM函数对元素执行此操作,但之后您必须在内部执行此操作casper.evaluate(),因为PhantomJS(CasperJS构建于其上)具有两个上下文并且页面上下文是沙箱.此外,您无法从页面上下文返回DOM节点.