如何使用Protractor测试检查元素是否可点击

Question

我有一个元素，使用CSS属性pointer-events: none;使其无法点击。如何检查该元素是否可点击，因为在该元素上执行.click()会抛出一个无法捕获的异常：UnknownError：unknown error: Element is not clickable at point。由于这个错误，测试立即结束，而try catch无法捕获异常。该元素是一个链接，所以我只想检查重定向是否发生。

- Encore PTL

---

请尝试以下代码：browser.driver.findElement(by.css('CSS_PATH')).then(function(element) { try { element.click(); } catch(err) { console.log('在catch块中'); } }, function(err) { console.info('元素无法点击'); }); - Sakshi Singla

那不起作用。同时，console.info('Element is not clickable')无法到达，因为该元素存在于页面上，并且只有在页面上缺少该回调时才会调用它。 - Encore PTL

Answer 1

我不知道protractor，但是使用纯JS您可以做到：

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

然而，所有想要支持的浏览器可能都不支持getComputedStyle 。请查看MDN兼容矩阵，其中指出IE 8不支持此功能，但可能也不支持pointer-events CSS属性。

- RobG

---

所以我通过运行您发送的脚本来解决它，使用expect(browser.executeScript("return window.getComputedStyle(element).getPropertyValue('pointer-events')").toBe('none')。 - Encore PTL

Answer 2

如果你真的想使用Protractor，你可以使用以下代码：

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

注：以上内容涉及IT技术，已尽力使翻译通俗易懂，如有翻译不准确之处，敬请谅解。

- fSiq

Answer 3

实际上有两种方法来检查它。

1）使用ExpectedConditions

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

如果找不到或无法点击，将返回错误。

2）使用protractor的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;
     });
}

- Jacek Góraj

Answer 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);
    });
  }
}

在你的测试代码中： import { testHelpers } from '../src/core/e2e/helpers';

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

- Alexander Yamkov