Question

如何使用nightwatch js检查元素是否可点击？我想点击一个元素但是当我运行nightwatch时，selenium没有点击该元素，因为它还无法点击。

Answer 1

这样的事情应该有效。如果您有疑问，请告诉我

var util = require('util');
var events = require('events');

/*
 * This custom command allows us to locate an HTML element on the page and then wait until the element is both visible
 * and does not have a "disabled" state.  It rechecks the element state every 500ms until either it evaluates to true or
 * it reaches maxTimeInMilliseconds (which fails the test). Nightwatch uses the Node.js EventEmitter pattern to handle 
 * asynchronous code so this command is also an EventEmitter.
 */

function WaitUntilElementIsClickable() {
  events.EventEmitter.call(this);
  this.startTimeInMilliseconds = null;
}

util.inherits(WaitUntilElementIsClickable, events.EventEmitter);

WaitUntilElementIsClickable.prototype.command = function (element, timeoutInMilliseconds) {
  this.startTimeInMilliseconds = new Date().getTime();
  var self = this;
  var message;

  if (typeof timeoutInMilliseconds !== 'number') {
    timeoutInMilliseconds = this.api.globals.waitForConditionTimeout;
  }

  this.check(element, function (result, loadedTimeInMilliseconds) {
    if (result) {
      message = '@' + element + ' was clickable after ' + (loadedTimeInMilliseconds - self.startTimeInMilliseconds) + ' ms.';
    } else {
      message = '@' + element + ' was still not clickable after ' + timeoutInMilliseconds + ' ms.';
    }
    self.client.assertion(result, 'not visible or disabled', 'visible and not disabled', message, true);
    self.emit('complete');
  }, timeoutInMilliseconds);

  return this;
};

WaitUntilElementIsClickable.prototype.check = function (element, callback, maxTimeInMilliseconds) {
  var self = this;

  var promises =[];
  promises.push(new Promise(function(resolve) {
    self.api.isVisible(element, function(result) {
      resolve(result.status === 0 && result.value === true);
    });
  }));

  promises.push(new Promise(function(resolve) {
    self.api.getAttribute(element, 'disabled', function (result) {
      resolve(result.status === 0 && result.value === null);
    });
  }));

  Promise.all(promises)
    .then(function(results) {
      var now = new Date().getTime();
      const visibleAndNotDisabled = !!results[0] && !!results[1];
      if (visibleAndNotDisabled) {
        callback(true, now);
      } else if (now - self.startTimeInMilliseconds < maxTimeInMilliseconds) {
        setTimeout(function () {
          self.check(element, callback, maxTimeInMilliseconds);
        }, 500);
      } else {
        callback(false);
      }
    })
    .catch(function(error) {
      setTimeout(function () {
        self.check(element, callback, maxTimeInMilliseconds);
      }, 500);
    });
};

module.exports = WaitUntilElementIsClickable;

将此代码作为文件添加到命令文件夹中。它应该被称为waitUntilElementIsClickable.js或任何你想要的命令。

用法是：

browser.waitUntilElementIsClickable('.some.css');

您还可以使用页面元素：

var page = browser.page.somePage();
page.waitUntilElementIsClickable('@someElement');

Answer 2

您可以将waitForElementVisible()与:enabled CSS伪类结合使用。

例如，以下将等待最多10秒钟#element启用，然后单击它（请注意，如果10秒后元素未启用，测试将失败）：

browser
  .waitForElementVisible('#element:enabled', 10000)
  .click('#element');

Answer 3

你能否展示一个示例元素，如果按钮不可点击，通常应该有一个属性名称“禁用”，这应该有效。

browser.assert.attributeEquals(yourCSS, 'disabled', true)

Answer 4

我无法发表评论，但Alex R建议的代码存在一些问题。

首先，该代码不适用于Firefox，因为geckodriver不会返回“状态”。所以这个：

resolve(result.status === 0 && result.value === true)

需要更改为此：

resolve(result.value === true).

第二行：

self.client.assertion(result, 'not visible or disabled', 'visible and not disabled', message, true);

无效，需要在中注释掉为了使代码运行。

如何使用nightwatchjs检查元素是否可点击？

4 个答案: