angularjs - 测试失败，因为 AngularJS 没有及时初始化

Question

我正在尝试针对 AngularJS (v1.6) 应用程序使用 TestCafe。

我有一个button然后，当单击时，打开一个模式(从 UI Bootstrap )。当我在 Chrome 中尝试时，效果很好。

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

我们的应用程序需要用户身份验证，并且登录页面不是基于 Angular。我的测试阶段运行良好。

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

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

通过一些研究，我发现了 testcafe-angle-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还可以帮助您管理所有这些等待机制。