How to switch bootstrap tabs in Geb functional test in grails?

Question

Ні! That's my first question here.

I'm using grails 3.1.7 and inbuilt Spock with Geb.

I'm trying to switch between two bootstrap tabs inside the same page to avoid ElementNotVisibleException.

Here is some code (with several lines omitted):

Markup:

<ul class="nav nav-tabs">
    <li class="${registerActive ? '' : 'active'}"><a data-toggle="tab" href="#login">...</a></li>
    <li class="${registerActive ? 'active' : ''}"><a id="registerTab" data-toggle="tab" href="#register">...</a></li>
</ul>

<div class="tab-content">
    <div id="login" class="tab-pane fade ${registerActive ? '' : 'in active'}">
        <g:form ...>
            <div>
                <g:field type="email" name="username" />
            </div>
            ...
        </g:form>
    </div>

    <div id="register" class="tab-pane fade ${registerActive ? 'in active' : ''}">
        <g:form ...>
            <div>
                <g:field type="email" name="email"/>
            </div>
            ...
        </g:form>
    </div>
</div>

Test:

void "register"() {
    when:"user logged in"
    register '[email protected]', 'passW0rd!' ...

    then: ...
}

    private register(String email, String password ...) {
    go "/"
    $('#registerTab').click()
    $('input[name=email]').value(email)
    $('input[name=password]').value(password)
    ...
    $('input[name=register]').click()
}

Attempt to access "email" field causes ElementNotVisibleException.

I also tried adding and removing active class using jquery property.

But with no result, the form still remains invisible for Geb.

What am I doing wrong? Could one please suggest the proper way to switch between two tabs inside the distinct page?

Thanks!

Answer 1

I know this is way in the past, but in case anyone else needs a solution, here is one. I created a javascript function like:

function changeTabs(tabNumber) {
    $('a[href$="container' + tabNumber + '"]').tab('show');
}

Then, in my Geb test, I changed the tab with the following line:

js.changeTabs('3')

This works with the ChromeDriver which is what we are using.