GEB find first visible element

Question

I have got some hidden buttons on the page. When I click on text input, one of these buttons shows on the page. Before:

<div field='login'>
    <input type="text"> 
    <button class="submit" style="display: none">Save</button>
</div>

<div field='name'>
    <input type="text"> 
    <button class="submit" style="display: none">Save</button>
</div>

After click on second input:

<div field='login'>
    <input type="text"> 
    <button class="submit" style="display: none">Save</button>
</div>

<div field='name'>
    <input type="text"> 
    <button class="submit">Save</button>
</div>

So I try to interact with second button by next selectors in my test:

static content = {
    submitButton { $("button.submit") }
}

but I have next error:

isorg.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with

If I write:

static content = {
    submitButton { $("button.submit", 1) }
}

it works, but I need to work with one first visible button on the page. What is wrong?

Frentz

Answer 1

Unfortunately there is no css selector to find visible elements but you can use displayed property of Navigator and its findAll() method to find the button that is visible:

static content = {
    submitButton { $("button.submit").findAll { it.displayed } }
}

Unloosen

I know this is old, but wanted to add that this will give you a Navigator Set containing all of the submit buttons not just the first one (which is what the question asks for). if you only want the first occurrence, you would say submitButton.first() or you could use the closure find() instead of findAll() – Reese