Question

我正在为AngularJS（v1.6）应用程序试用TestCafe。

我有一个button，然后单击它会打开一个模式（从UI引导程序）。当我在Chrome浏览器中尝试一下时，效果很好。

<button class="btn" ng-click="open()">Open</button>

我们的应用程序需要用户身份验证，并且登录页面不是基于Angular的。我的测试阶段工作正常。

但是，当实际测试运行时，它会“单击”按钮，但没有任何反应。

我怀疑但无法证明，它是在AngularJS在页面上正确初始化之前被单击的。

经过一些研究，我发现了testcafe-angular-selectors项目和一个waitForAngular方法，但这似乎仅适用于Angular2 +。

import { Role, Selector } from 'testcafe';

const regularAccUser = Role('http://127.0.0.1:8080', async t => {
    await t
        .typeText('[name=username]', 'abc')
        .typeText('[name=password]', '123')
        .click('.btn-primary');
});

fixture`Characters Modal`;

test('modal title', async t => {
    await t
        .useRole(regularAccUser)
        .navigateTo('http://127.0.0.1:8080/fake/page')
        .click('.btn')
        .expect(Selector('.modal-title').innerText).eql('Insert Symbol');
});

在.wait(1000)之前添加click解决了该问题。它不是在等待Angular加载。我宁愿在每个测试中都不使用waits-我可以使用其他技巧吗？

Answer 1

您可以使用TestCafe断言作为一种机制，等待元素就绪后再对其进行操作。

典型的等待机制是：

const button = Selector('button.btn')
    .with({visibilityCheck: true});

await t
    .expect(button.exists) // wait until component is mounted in DOM
    .ok({timeout: 10000})  // wait enough time 
    .hover(button)         // move TestCafe cursor over the component
    .expect(button.hasAttribute('disabled'))
    .notOk({timeout: 10000}) // wait until the button is enabled
    .click(button); // now we are sure the button is there and is clickable

此article还可帮助您管理所有这些等待机制。

Answer 2

正如您正确提到的那样，waitForAngular方法仅适用于Angular，而不适用于AngularJS。我建议您创建自己的waitForAngularJS函数，并在beforeEach钩子上以及角色初始化后调用它。

在最简单的情况下，可以按以下方式实现：

function waitForAngularJS (t) {
    await t.wait(1000);
}

fixture `App tests`
    .page('page with angularjs')
    .beforeEach(async t => {
        await waitForAngularJS(t);
    });

但是，使用wait方法并不是一个可靠的解决方案。我建议您找到一种方法来检测AngularJS是否已加载到客户端页面上。如果可能的话，您可以使用TestCafe ClientFunctions机制来实现waitForAngularJS方法。

这篇文章也很有用：How to check if angular is loaded correctly

测试失败，因为AngularJS尚未及时初始化

2 个答案: