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

Question

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

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

我正在尝试在同一页面内的两个引导选项卡之间切换以避免 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 属性添加和删除 active 类。

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

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

谢谢！

Answer 1

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

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

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

js.changeTabs('3')

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

Answer 2

我认为您遇到了这个问题，因为标签需要一段时间才能可见。

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

异步

现代网页充斥着 AJAX 之类的异步操作 请求和动画。 Geb 为这一事实提供了内置支持 生活。

任何内容查找或操作都可以包装在 waitFor 子句中。

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

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