grails - 如何在Grab功能测试中切换引导选项卡？

Question

Ні!这是我的第一个问题。

我正在使用grails 3.1.7和Geb内置的Spock。

我试图在同一页面内的两个 bootstrap 选项卡之间切换，以避免ElementNotVisibleException。

这是一些代码(省略了几行):

标记:

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

测试:

void "register"() {
    when:"user logged in"
    register 'testUser@gmail.com', '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()
}

尝试访问“电子邮件”字段会导致ElementNotVisibleException。

我还尝试使用jquery属性添加和删除 Activity 类。

但是没有结果，该表格对于Geb仍然不可见。

我究竟做错了什么？能否请您提出在不同页面内的两个标签之间进行切换的正确方法？

谢谢!

Answer 1

我知道这是过去的方式，但是如果其他任何人需要解决方案，这是一个解决方案。我创建了一个JavaScript函数，例如:

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

然后，在我的Geb测试中，我用以下行更改了选项卡:

js.changeTabs('3')

这与我们正在使用的ChromeDriver配合使用。