使用CasperJS中的document.querySelectorAll获取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中做同样的事情，但是我无法得到相同的结果。以下是迄今为止我的代码（这只是一个更大文件的一部分，因此我不会发布我的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)，脚本确实可以正确打印一个错误信息，但接下来就会崩溃，因为数组的其余部分都是 null 对象！ 我以为 Array.prototype.map 应该可以防止这种情况？ 通过 Casper ，我如何获取此页面中的错误消息数组？

- Anastasya Lundquist

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。

- Artjom B.

Answer 2

Node.textContent属性没有关联的属性。直接访问该属性：

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

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

- canon