Restricting selector to visible elements


#1

I am using the default Velocity cucumber stack.

I have also found the code at https://github.com/webdriverio/cucumber-boilerplate to be helpful. But I use bootstrap and other CSS which works by hiding elements (e.g. when a tab panel is not active).

Is there any easy way to select the “first visible” element rather than just the “first” matching element? (e.g. something like ‘.class:visible’)

For example, I wanted to get the text input corresponding by its corresponding label:

var selector = '//input[@id=//label[text()="' + labelText + '"]/@for]';
this.client.setValue(selector, value).call(callback);

But that may grab an undesired hidden input. (In fact, I’ll get the error message about trying to set a hidden field.)

To get the first visible one, I have to jump through all these hoops:

  this.client.elements(selector, function (err, res) { // find all matching elements
    res.value.forEach(function (element) { // iterate through them
      this.client.elementIdDisplayed(element.ELEMENT, function (err, res) { // check visibility
        if (res.value) { ... }
      }));
    }.bind(this));
  }.bind(this));