如何在 grails 的 Geb 功能测试中切换 bootstrap 选项卡？

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

尝试访问 "email" 字段导致 ElementNotVisibleException。

我还尝试使用 jquery 属性.

添加和删除 active class

但没有结果，Geb 仍然看不到该表格。

我做错了什么？有人可以建议在不同页面内的两个选项卡之间切换的正确方法吗？

谢谢！

Answer 1

我认为您遇到了这个问题，因为该选项卡需要一段时间才能显示。

如此处所述 - http://www.gebish.org/async

Asynchronicity

Modern web pages are full of asynchronous operations like AJAX requests and animations. Geb provides built in support for this fact of life.

Any content lookup, or operation can be wrapped in a waitFor clause.

在你的情况下，它应该是这样的：

go "/"
$('#registerTab').click()
waitFor {
    $('input[name=email]').value(email)
}

Answer 2

我知道这是过去的方式，但如果其他人需要解决方案，这里有一个。我创建了一个 javascript 函数，例如：

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

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

js.changeTabs('3')

这适用于我们正在使用的 ChromeDriver。

如何在 grails 的 Geb 功能测试中切换 bootstrap 选项卡？

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

grails

functional-testing

spock

geb