如何使用量角器检查元素是否不可点击？答案

【问题标题】：How to check if an element is not clickable with Protractor?如何使用量角器检查元素是否不可点击？
【发布时间】：2015-01-09 11:39:29
【问题描述】：

用 Protractor 测试元素是否可点击很简单，但我一直在摸索如何检查元素是否可点击.

我尝试将 click 函数包装在 try/catch 中，这样当尝试单击时抛出错误时，它应该捕获它并让测试通过；但是，这不起作用。

这是我的检查方法代码：

return this.shouldSeeDisabledFunds()
    .then(function() {
        var clickable = true;

        try {
            fundsElem.first().click();
        } catch (e) {
            clickable = false;
            console.log(clickable);
        } finally {
            console.log(clickable);
        }

        console.log(clickable);

        // All the way through, clickable is still true, and the console log in the
        // catch is not called. I believe this is because click is asynchronous.
    })
;

【问题讨论】：

click() 不返回承诺吗？
是的，确实如此。在意识到这一点之后，我实际上已经想通了。我会发布一个涵盖它的答案。

标签： javascript node.js protractor functional-testing

【解决方案1】：

我找到了适用于此的解决方案。当click() 返回一个promise 时，您可以简单地将.then 关闭并抛出成功的点击处理程序并覆盖catch 处理程序以不执行任何操作，如果元素不可点击，则测试通过。

return this.shouldSeeDisabledFunds()
    .then(function() {
        fundsElem.first().click()
            .then(
                function() {
                    throw "Can click Funds element that should be disabled";
                },
                function() {}
            )
        ;
    })
;

【讨论】：

需要注意的是，这个方案有个副作用，就是实际点击了元素。如果有一种解决方案可以在没有副作用的情况下返回信息，那就太好了。

【解决方案2】：

可能不适用于您的情况，但检查元素是否可点击的更好方法是检查它是否可见且已启用：elem.isDisplayed() 和 elem.isEnabled()。这样您就不会在不应该的时候意外点击按钮。

仅供参考，会有图书馆来帮助处理这样的案例：https://github.com/angular/protractor/pull/1703

【讨论】：

还有其他情况可能导致元素 no 不可点击，例如，如果在其顶部打开了模式对话框，那么即使元素可见并启用，也无法点击。
还有指针事件：无；将使元素不可点击（量角器异常），但 elem.isEnabled() 将返回 true

【解决方案3】：

其实有两种检查方法。

1) 使用ExpectedConditions

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to not be clickable.
browser.wait(EC.not(EC.elementToBeClickable($('#abc'))), 5000);

如果发现可点击，则返回错误。

2) 使用量角器的isEnabled、isDisplayed 和isPresent

据我了解，您可以创建isNotClickable，仅当元素存在、显示或启用时才会返回 false，否则返回 true：

function isNotClickable(element) {
    return element.isPresent().then((isPresent) => {
        if (isPresent) {
            return element.isDisplayed().then((isDisplayed) => {
                if (isDisplayed) {
                    return !element.isEnabled();
                }
                return true;
            });
         }
         return true;
     });
}

【讨论】：

【解决方案4】：

验证 Clickable ：element.isDisplayed().toBe(true)

不可点击：element.isDisplayed().toBe(false)

为我工作。

【讨论】：

一个元素可以显示，但被另一个半透明元素覆盖，该元素会接收点击。
显示属性与可点击属性无关。可以显示元素，但同时可以禁用元素。所以，这不是解决方案。