Тест не пройден, так как AngularJS не был инициализирован вовремя

Question

Я пробую TestCafe для приложения AngularJS (v1.6).

У меня есть button, затем при нажатии открывается модальное окно (из начальной загрузки UI).Это прекрасно работает, когда я пробую себя в Chrome.

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

Наше приложение требует аутентификации пользователя, а страница входа - , а не на основе углов.Эта фаза моего теста работает нормально.

Однако, когда сам тест выполняется, он «нажимает» кнопку, но ничего не происходит.

Я подозреваю, но не могу доказать, что он нажалдо правильной инициализации 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

Как вы правильно сказали, метод 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 на страницу на стороне клиента.Если это возможно, вы можете реализовать метод waitForAngularJS, используя механизм TestCafe ClientFunctions * 1012. *.

Этот пост также может быть полезен: Как проверить, правильно ли загружен angular

Answer 2

Вы можете использовать утверждения 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

Эта статья может также помочь вам в управлении всеми этими механизмами ожидания.