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

【问题标题】：How to check if an element is clickable using Protractor test如何使用量角器测试检查元素是否可点击
【发布时间】：2014-12-02 23:49:52
【问题描述】：

我有一个元素不允许使用 CSS 属性 pointer-events: none; 进行点击我如何检查该元素是否可点击，因为在元素上执行 .click() 会引发我无法捕获的异常 @987654323 @ 元素是一个链接，所以我只想检查重定向是否发生，但由于这个错误，它立即结束测试，try catch 无法捕获异常。

【问题讨论】：

请试试这个： browser.driver.findElement(by.css('CSS_PATH')).then(function(element) { try { element.click(); } catch(err) { console .log('在 catch 块中'); } }, function(err) { console.info('元素不可点击'); });
那行不通。此外，由于页面存在元素，因此无法访问 console.info('Element is not clickable')，并且只有在页面中缺少该元素时才会调用该回调。

标签： javascript testing protractor

【解决方案1】：

我不知道量角器，但是使用普通的JS你可以做到：

window.getComputedStyle(element).getPropertyValue('pointer-events') == 'none';

然而，getComputedStyle 的支持可能并非在您希望支持的所有浏览器中都可用，请参阅MDN compatibility matrix，这表明 IE 8 不支持，但它可能不支持 pointer-events无论如何都是 CSS 属性。

【讨论】：

所以我通过运行您使用expect(browser.executeScript("return window.getComputedStyle(element).getPropertyValue('pointer-events')").toBe('none')发送的脚本解决了这个问题

【解决方案2】：

如果你真的想使用量角器，你可以使用以下方法：

expect(protractor.ExpectedConditions.elementToBeClickable(element)).not.toBe(true);

【讨论】：

【解决方案3】：

其实有两种检查方法。

1) 使用ExpectedConditions

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

如果未找到或不可点击，将返回错误。

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

据我了解，您可以创建isClickable，如果元素存在、显示和启用，它将返回 true，否则返回 false：

function isClickable(element) {
    return element.isPresent().then((isPresent) => {
        if (isPresent) {
            return element.isDisplayed().then((isDisplayed) => {
                if (isDisplayed) {
                    return element.isEnabled();
                }
                return false;
            });
         }
         return false;
     });
}

【讨论】：

【解决方案4】：

我写了一个小检查实用方法，记住它会在元素变为可点击时立即点击：

import { ElementFinder, promise } from 'protractor';

export let testHelpers = {
  isClickable(el: ElementFinder): promise.Promise<boolean> {
    return new promise.Promise(resolve => {
      let interval = setInterval(() => {
        el.click().then(() => {
          clearInterval(interval);
          setTimeout(() => {
            resolve(true);
          }, 500);
        }, () => { });
      }, 100);
    });
  }
}

在您的测试代码中：从 '../src/core/e2e/helpers' 导入 { testHelpers };

describe('App', () => {
  it('should do something', () {
    let btn = $('.cls');
    browser.wait(testHelpers.isClickable(btn), 3000);
  });
});

【讨论】：