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

Question

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

Answer 1

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

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

这会给你所有<p>页面上具有 data-whatever 的元素属性集。如果你想通过 data-whatever 的值过滤它属性，那么你需要使用 attribute selectors根据您的需要。

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 的基础)有两个上下文，并且页面上下文是沙箱化的。此外，您不能从 page context 返回 DOM 节点。 .