How to catch ngToast with Protractor?

Question

I need somehow to catch ngToast message after some action. I tried different solutions from this site, but they didn't help me and I don't know why. Does anyone has a working solution ? My last attempt was like:

var HomePage = require('./home.pageObject');

describe('Home Page tests', function () {
  var homePage = new HomePage();
  var EC = protractor.ExpectedConditions;

  beforeEach(function () {
      browser.get('/#/');
  });

  it('should fail login', function () {
      var toast = $('.ng-toast');
      homePage.signinBtn.click();
      homePage.login('admin', 'Password')
          .then(function () {
              var toast = $('.alert');
              browser.wait(EC.visibilityOf(toast), 3000);
          });
  });
});

Thanks.

Answer 1

Inspect the toast element once it is shown and then try to grab the message using css.

In one of our projects where we use angular-toastr, this does the trick:

element(by.css('#toast-container .toast-message')

Answer 2

You can use this function and call it in the test: First I'm waiting presence in the dom, then visibility and then I return the text:

this.returnToastText= function(){

    browser.wait(EC.presenceOf(element(by.css(".alert"))), 3000).then(function () {
        browser.wait(EC.visibilityOf(element(by.css(".alert"))), 3000).then(function () {
            return toastText= element(by.css(".alert")).getText();
        })
    })

};