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?

Shouldn't it be a simple if/else logic on top of `Nightwatchjs` to determine the visibility of the element? You generally do not expect the test to look for some element that may not present(for the sake of performance at least). I would, in that case, see if the element exists or not and do otherwise(possibly try/catch) as well — Saifur, Jul 28 '15 at 21:05
I have tried that sort of construct...but as soon as issuing the Nightwatchjs "wait" or "isvisible" statement, the error is thrown. — Aaron Kuehn, Jul 28 '15 at 21:19
Here is an example: try { browser.isVisible('#advanced-search', function(result) { console.log(result.state); }) } catch (myError) { console.log(myError); } — Aaron Kuehn, Jul 28 '15 at 21:23

score 16 · Answer 1 · answered Apr 10 '16 at 17:16

16

You can achieve this by using the Selenium protocol "element" and a callback function to check the result status to determine if the element was found. For example:

browser.element('css selector', '#advanced-search', function(result){
    if(result.status != -1){
        //Element exists, do something
    } else{
        //Element does not exist, do something else
    }
});

answered Apr 10 '16 at 17:16

EricM

171
1
6

I tried out a couple .elements commands on a simple google homepage example and Saifur's answer is actually the correct one. If an element is not present, the status code will be set to 0, but the elements array will be empty. Thus your answer is wrong :( – dwoodwardgb Jul 21 '16 at 20:46
You are correct, when you use `.elements()`, the status is 0 with an empty array of elements. However, my example uses `.element()`. It's easy to confuse the two, they only differ by **s**, but they behave very differently. – EricM Jul 23 '16 at 00:09
I tried to add this to my above comment but I was too slow :( Please check out my [Gist](https://gist.github.com/ericmacfa/47783113f3b9c97051998b52075d9a97) if you're not convinced, you can download the file to your tests directory and run it like normal – EricM Jul 23 '16 at 00:20

score 7 · Answer 2 · edited May 23 '17 at 12:25

You seem to be on the right track with isVisible. From the nightwatch documentation, we see 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 use the approach suggested by Saifur. Call the selenium api's .elements command and then check the result array's length:

browser.elements('css selector', '#advanced-search', results => {
  if (results.value.length > 0) { /* 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) { // some error occurred, handle accordingly
    }

    callback(results.value.length > 0);
  });
};

then in normal code you could call it 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.

score 1 · Answer 3 · answered Jul 28 '15 at 21:41

The syntax could be little off. Not very familiar with NightWatchJS. However the concept remains same.

//I would not wait for a element that should not exist
//rather I would find the list of the element and see if the count is greater than 0
//and if so, we know the element exists
browser.findElements(webdriver.By.css('#advanced-search')).then(function(elements){
    if(elements.length> 0){
        console.log(elements.length);
    }
});

See some more example here

score 1 · Answer 4 · answered Jan 11 '18 at 20:35

My team uses a single function to authenticate with a few different signin forms, and we utilize a custom command called ifElementExists to accomplish the branching logic for understanding which form we're on. We also use this on a few other pages that don't have a better method for determining current state.

import { CustomCommandShorthand } from './customCommands';
import { isFunction } from 'lodash';

exports.command = function ifElementExists(this: CustomCommandShorthand, selector: string, ifTrue: Function, ifFalse?: Function) {
    this.perform(() => {
        if (!isFunction(ifTrue)) {
            throw new Error(`The second argument must be callable. You passed a ${typeof ifTrue} instead of a function.`);
        }

        this.element('css selector', selector, function ifElementExistsCallback({ status }) {
            if (status !== -1) {
                return ifTrue();
            }

            if (isFunction(ifFalse)) {
                ifFalse();
            }
        });
    })
}

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

4 Answers4

Linked