Nightwatchjs: how to check if element exists without creating an error/failure/exception

Question

In the page I'm testing, two buttons may be displayed: BASIC or ADVANCED.

I want to be able to tell if the ADVANCED button is showing -- and if so, click it.

If the BASIC button is showing, I want to do nothing and continue with my test.

All of the Nightwatchjs options I've experimented with generate a failure message. For example, if I "waitforpresent" or "waitforvisible" and the button is not there, it generates an error/failure. I just want to know which button is present so I can make a decision in my code.

Here is what I have tried:

try { 

    browser.isVisible('#advanced-search', function(result) {console.log(result.state); }) 

} catch (myError) 

{ 

    console.log(myError); 

}

Thoughts?

Answer 1

It is absolutely correct to go ahead with the isVisible method. You may know that in the callback you can check the result.value property to see whether or not the element was visible, i.e:

browser.isVisible('#advanced-search', results => {

  if (results.value) { /* is visible */ }

  else { /* is not visible */ }

});

Alternatively, you could call the selenium API .elements command and then check the result array's length like the following:

browser.elements('css selector', '#advanced-search', results => {

  if (results.value.length > 0) { /* if the length of the resultant array is greater than 0, which means an element exists */ }

  else { /* element does not exist */ }

});

This, in fact, could be wrapped into a custom command:

// isPresent.js

module.exports.command = function (selector, callback) {

  return this.elements('css selector', selector, results => {

    if (results.status !== 0) { // only when some error occurs, this will handle accordingly

    }

 

    callback(results.value.length > 0);

  });

};

//If there are no errors then the call will be made  like this:

 

browser.isPresent('#advanced-search', advancedSearchPresent => {

  // make decisions here

}

If you are going to be making additional API calls in the callback, it may be wise to wrap it all in a .perform call:

browser.perform((_, done) => {

  browser.isPresent('#advanced-search', advancedSearchPresent => {

 

    // ...do more stuff...

 

    done();

  });

});

As to why the .perform is necessary, this might be helpful.