使用 document.querySelectorAll 通过 CasperJS 获取 textContent

Question

我正在使用 CasperJS 自动填写在线表格。每当您尝试提交已用无效数据填写任何必填字段的表单时，每个包含无效数据的字段都会显示一条错误消息，以提醒您问题所在。我想收集所有这些消息并将它们连接成一个——无论是通过数组还是其他方法对我来说都无关紧要。错误消息的 CSS 如下所示：

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Name.Last">
    <span class="" for="Name_Last" generated="true">
        The Last Name field is required.
    </span>
</span>

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Address.City">
    <span class="" for="Address_City" generated="true">
        The City field is required.
    </span>
</span>

在浏览器控制台中，我成功地做到了：

var arr = document.querySelectorAll('.field-validation-error');
for (var i = 0; i < arr.length; i++) { 
    var err = arr[i]; console.log(err.textContent);
}

返回了我：

"The Last Name field is required."
"The City field is required."

我打算在 CasperJS 中做同样的事情，但我得不到相同的结果。到目前为止，这是我的代码（一个更大文件的片段，所以我不会 post 我的 casper.start 或任何东西）：

var results = self.evaluate(function() {
    var arr =  document.querySelectorAll('.field-validation-error');
    return Array.prototype.map.call(arr, function(e) {
        return e.getAttribute('textContent');
    });
});

for (var i = 0; i < results.length; i++) {
     console.log(results[i]);
}

这会输出三个空行。如果我只是 return e 然后 console.log(results[i].textContent))，脚本会正确打印一条错误消息，但随后会崩溃，因为数组的其余部分充满了空对象！我以为 Array.prototype.map 应该可以防止这种情况发生？如何通过 Casper 从该页面获取错误消息数组？

Answer 1

您应该可以使用本机 CasperJS 函数执行此操作 getElementsInfo。它包含每个元素的 text 属性：

var texts = casper.getElementsInfo('.field-validation-error').map(function(info){
    return info.text.trim();
});

e.getAttribute('textContent')显然不行，因为没有textContent属性，只有一个textContent属性。您在浏览器控制台中使用的相同代码应该在 PhantomJS 中工作。您可以尝试将 .textContent 更改为 .innerText。

Answer 2

节点。<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent" rel="nofollow">textContent</a> 属性没有关联的属性。直接访问属性：

return Array.prototype.map.call(arr, function(e) {
    return e.<b>textContent</b>;
});

出于某种原因，您访问了第一个示例中的属性，并在第二个示例中查找了属性。

使用 document.querySelectorAll 通过 CasperJS 获取 textContent

Using document.querySelectorAll to get textContent with CasperJS

javascript

phantomjs

casperjs

selectors-api