Testing the contents of a temporary element with protractor

Question

I\'m trying to test the login page on my site using protractor.

If you log in incorrectly, the site displays a \"toast\" message that pops up for 5 seconds, then dis

Answer 1

In case anyone is still interested, this code works for me with no hacks to $timeout or $interval or Toast. The idea is to use the promises of click() and wait() to turn on and off synchronization. Click whatever to get to the page with the toast message, and immediately turn off sync, wait for the toast message, then dismiss it and then turn back on sync (INSIDE the promise).

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;
   })
});

Answer 2

Chris-Traynor's answer worked for me but i've got an update.

ignoreSynchronization is now deprecated. For those using angular and protractor to test this, the below works nicely for me.

$(locators.button).click();
await browser.waitForAngularEnabled(false);
const isDisplayed = await $(locators.notification).isPresent();
await browser.waitForAngularEnabled(true);
expect(isDisplayed).toEqual(true);

I've simplified this to make it easier to see, I would normally place this inside a method to make the locators dynamic.

Answer 3

I hope this can help who has some trouble with protractor, jasmine, angular and ngToast.

I create a CommonPage to handle Toast in every pages without duplicate code. For example:

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);
                    });

                });
            });
        })
});

And this is my 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's 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;

Answer 4

you should wait for your toast displayed then do other steps

browser.wait(function() {
    return $('.toaster').isDisplayed();
}, 20000);

Answer 5

It turns out that this is known behaviour for protractor. I think it should be a bug, but at the moment the issue is closed.

The workaround is to use $interval instead of $timeout, setting the third argument to 1 so it only gets called once.

Answer 6

I hacked around this using the below code block. I had a notification bar from a 3rd party node package (ng-notifications-bar) that used $timeout instead of $interval, but needed to expect that the error text was a certain value. I put used a short sleep() to allow the notification bar animation to appear, switched ignoreSynchronization to true so Protractor wouldn't wait for the $timeout to end, set my expect(), and switched the ignoreSynchronization back to false so Protractor can continue the test within regular AngularJS cadence. I know the sleeps aren't ideal, but they are very short.

browser.sleep(500);
browser.ignoreSynchronization = true;
expect(page.notification.getText()).toContain('The card was declined.');
browser.sleep(500);
browser.ignoreSynchronization = false;