如何检查 Casper.js 中是否禁用了文本输入？答案

【问题标题】：How to check whether a text input is disabled in Casper.js?如何检查 Casper.js 中是否禁用了文本输入？
【发布时间】：2015-03-12 22:20:00
【问题描述】：

我正在编写一个 Casper.js 测试。我需要检查输入字段是否为disabled。

casper.waitForSelector("input[id='myid']",
    function success() {
        ...
    },
    function fail() {
        ...
    });

    ...

检索字段不是问题，但是禁用的测试呢？

【问题讨论】：

标签： javascript casperjs disabled-input

【解决方案1】：

我不完全确定 Casper.js 是否支持这一点，但您应该可以在选择器中使用 :disabled pseudo-class 并让 DOM 为您处理。

如果正确运行，您的代码将变成：

casper.waitForSelector("input[id='myid']:disabled",
function success() {
    ...
},
function fail() {
    ...
});

...

只有当它被禁用时，您才会收到该元素。如果你需要逆向，有一个对应的:enabled 应该能够做到这一点。

【讨论】：

是的，PhantomJS（和 CasperJS）支持 :disabled 和 :enabled。
如果元素被启用（或禁用，无论你不想要）被认为是失败的，那么这个方法应该可以工作。否则，Artjom 的答案可能会更好，因为它为您提供了一个布尔值。
我可以看到一种脚本，您的建议会更简洁。这取决于用例。例如，如果禁用 (?) 是页面上某个进程的指示符，那么您的建议会更好，因为可以直接调用两个生成的操作。当实际需要捕获状态更改时，我的建议很容易出错（并且难以修复）。另一方面，当必须断言条件时，我的建议会稍微好一些。

【解决方案2】：

您没有展示如何检索元素，但我假设您使用没有 evaluate 的 casper API。您必须使用evaluate，因为disabled 是DOM 元素的属性，而现有的casper API 仅提供检索属性的便利函数：

function success() {
    var disabled = this.evaluate(function(selector){
        return !!document.querySelector(selector).disabled;
    }, "input#myid");
}

如果页面加载后元素没有变化，也可以使用getElementInfo：

function success() {
    var disabled = !!this.getElementInfo("input#myid").attributes.disabled;
}

【讨论】：

你是说如果页面加载后元素被修改，我必须使用评估来捕获这些变化？换句话说，一个简单的 waitForSelector() 不会完成这项工作？
是的，因为getElementInfo 只捕获元素的属性，而不捕获属性。通常，开发人员并不关心属性，而只关心属性。如果元素是动态加载/添加的，您仍然需要waitForSelector。

【解决方案3】：

这是怎么回事。简单的同步，不引人注目。

var x = require('casper').selectXPath;

if (!casper.exists(x('//div[@class="item_size"]/input[@disabled]'))){ //!disabled
 xpath = '//div[@class="item_size"]//li[1]/label'
 var size = casper.fetchText(x(xpath)).trim();
 casper.echo(size);
 sizes.push(size)
}

【讨论】：