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?

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 } }
}