Question

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

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

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

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

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

谢谢！

Answer 1

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

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

异步性

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

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

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

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功能测试中切换引导选项卡？

2 个答案: