How can I check until the item is available to the client using nightwatchjs?

Question

How can I check until an item is available using the nightwatch js function? I want to click an element, but when I start the night view, selenium does not click on the element because it is not yet clickable.

Answer 1

Something like this should work. Let me know if you have any questions.

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; 

Add this code to the file in the command folder. It should be called waitUntilElementIsClickable.js or whatever you want your command to be.

Using:

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

You can also use page elements:

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

Answer 2

Can you show an example element, usually the attribute name should be “disabled”, if the button is not available, this should work.

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