Я пытаюсь проверить страницу входа на моем сайте с помощью транспортира.
Если вы входите в систему неправильно, на сайте отображается сообщение "тост", которое появляется в течение 5 секунд, а затем исчезает (используя $timeout).
Я использую следующий тест:
describe('[login]', ()->
it('should show a toast with an error if the password is wrong', ()->
username = element(select.model("user.username"))
password = element(select.model("user.password"))
loginButton = $('button[type=\'submit\']')
toast = $('.toaster')
# Verify that the toast isn't visible yet
expect(toast.isDisplayed()).toBe(false)
username.sendKeys("admin")
password.sendKeys("wrongpassword")
loginButton.click().then(()->
# Verify that toast appears and contains an error
toastMessage = $('.toast-message')
expect(toast.isDisplayed()).toBe(true)
expect(toastMessage.getText()).toBe("Invalid password")
)
)
)
Соответствующая разметка (нефрит) находится ниже:
.toaster(ng-show="messages.length")
.toast-message(ng-repeat="message in messages") {{message.body}}
Проблема заключается в отсутствии теста toastMessage (он не может найти элемент). Кажется, он ждет, когда тост исчезнет, а затем запустит тест.
Я также попытался поставить тест toastMessage вне обратного вызова then() (я думаю, что это в значительной степени избыточно), но я получаю то же самое поведение.
Моя лучшая догадка заключается в том, что транспортир видит, что там работает $timeout, и ждет его завершения до запуска следующего теста (ref поток управления транспортиром). Как мне обойти это и убедиться, что тест выполняется во время таймаута?
Update:
Следуя приведенному ниже предложению, я использовал browser.wait(), чтобы ждать, пока тост станет видимым, а затем попытался запустить тест, когда обещание было разрешено. Это не сработало.
console.log "clicking button"
loginButton.click()
browser.wait((()-> toast.isDisplayed()),20000, "never visible").then(()->
console.log "looking for message"
toastMessage = $('.toaster')
expect(toastMessage.getText()).toBe("Invalid password")
)
Операторы console.log позволяют мне видеть, что происходит. Это серия событий, [] - это то, что я вижу в браузере.
clicking button
[toast appears]
[5 sec pass]
[toast disappears]
looking for message
[test fails]
Для дополнительной ясности в том, что происходит с тостером: у меня есть служба, которая по существу содержит массив сообщений. Тост-директива всегда находится на странице (шаблон - нефрит выше) и следит за сообщениями в службе тостов. Если появилось новое сообщение, он запускает следующий код:
scope.messages.push(newMessage)
# set a timeout to remove it afterwards.
$timeout(
()->
scope.messages.splice(0,1)
,
5000
)
Это подталкивает сообщение в массив сообщений в области 5 секунд, что и делает тост (через ng-show="messages.length").
Почему переносчик ждет, пока истечет срок тоста $timeout, прежде чем перейти к испытаниям?
Оказывается, что это известное поведение для транспортира. Я думаю, что это будет ошибка, но на данный момент проблема закрыта.
Обходной путь заключается в использовании $interval вместо $timeout, установив третий аргумент в 1, чтобы он вызывался только один раз.
Я взломал это, используя нижеследующий блок кода. У меня была панель уведомлений от стороннего пакета node (ng-notifications-bar), который использовал $timeout вместо $interval, но нужно было ожидать, что текст ошибки будет определенным значением. Я использую короткий сон(), чтобы появилась анимация панели уведомлений, переключилась ignoreSynchronization на true, поэтому Protractor не дождался окончания $timeout, установил my expect() и переключил ignoreSynchronization обратно на false, поэтому Protractor может продолжите тест в пределах регулярной качательности AngularJS. Я знаю, что сон не идеальны, но они очень короткие.
browser.sleep(500);
browser.ignoreSynchronization = true;
expect(page.notification.getText()).toContain('The card was declined.');
browser.sleep(500);
browser.ignoreSynchronization = false;
you should wait for your toast displayed then do other steps
browser.wait(function() {
return $('.toaster').isDisplayed();
}, 20000);
Если кому-то все еще интересно, этот код работает для меня без хаков до $timeout или $interval или Toast. Идея состоит в том, чтобы использовать promises щелчка() и wait() для включения и выключения синхронизации. Нажмите все, чтобы перейти на страницу с помощью сообщения тоста, и немедленно отключите синхронизацию, дождитесь сообщения с тостом, затем отпустите его, а затем снова включите синхронизацию (ВСТАВЬТЕ обещание).
element(by.id('createFoo')).click().then(function () {
browser.wait(EC.stalenessOf(element(by.id('createFoo'))), TIMEOUT);
browser.ignoreSynchronization = true;
browser.wait(EC.visibilityOf(element(by.id('toastClose'))), TIMEOUT).then(function () {
element(by.id('toastClose')).click();
browser.ignoreSynchronization = false;
})
});
Надеюсь, это может помочь тем, у кого есть проблемы с транспортиром, жасмином, angular и ngToast.
Я создаю CommonPage для обработки Toast на всех страницах без дубликата кода. Например:
var CommonPage = require('./pages/common-page');
var commonPage = new CommonPage();
decribe('Test toast', function(){
it('should add new product', function () {
browser.setLocation("/products/new").then(function () {
element(by.model("product.name")).sendKeys("Some name");
var btnSave = element(by.css("div.head a.btn-save"));
browser.wait(EC.elementToBeClickable(btnSave, 5000));
btnSave.click().then(function () {
// this function use a callback to notify
// me when Toast appears
commonPage.successAlert(function (toast) {
expect(toast.isDisplayed()).toBe(true);
});
});
});
})
});
И это мой CommonPage:
var _toastAlert = function (type, cb) {
var toast = null;
switch (type) {
case "success":
toast = $('ul.ng-toast__list div.alert-success');
break;
case "danger":
toast = $('ul.ng-toast__list div.alert-danger');
break;
}
if (!toast) {
throw new Error("Unable to determine the correct toast type");
}
browser.ignoreSynchronization = true;
browser.sleep(500);
browser.wait(EC.presenceOf(toast), 10000).then(function () {
cb(toast);
toast.click();
browser.ignoreSynchronization = false;
})
}
var CommonPage = function () {
this.successAlert = function (cb) {
_toastAlert("success", cb);
};
this.dangerAlert = function(cb) {
_toastAlert("danger", cb);
}
}
module.exports = CommonPage;