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));