How to validate Toaster of Angular Js using Protractor?

2
votes

I am new for testing Angular js app with Protractor. I have a submit button on click of it, Toaster Message gets pop up on window.

Button to submit is below.

   <button title="Add the Expense Claim" ng-show="addExpDetailsShow" class="btn btn-primary btn-sm" ng-click="addExpenseDetails()">Add</button>

Toaster div is as below

<div class="toast-top-right" id="toast-container"><div style="" class="toast toast-error"><button class="toast-close-button">×</button><div class="toast-message">Select Expense Type.<br>Amount should be between 0.10 to 100000000.</div></div></div>

Now i need to validate whether the toaster is displayed or not and need to validate toaster message. I am using jasmine to write my test case. By googling i wrote below code .

it('adding expense', function(){

    element(by.xpath(".//*[@id='navbar-collapse']/ul[1]/li[2]/a")).click();
    element(by.xpath(".//*[@id='main-container']/div[1]/div/div/div[3]/div/button[1]")).click();    
    element(by.css('[ng-click="addExpenseDetails()"]')).click();
    toast = $$('.toast toast-error');
    browser.manage().timeouts().implicitlyWait(1000);
    expect(toast.getAttribute('value')).toEqual('some value');
     expect(toast.isDisplayed()).toBe(true);

});
2
angularjsjasmineprotractor

2 Answers

1
votes

Validating toaster is similar to validating any other elements in protractor. However the challenge is to validate within the time frame it appears and disappears. To verify its details, try waiting for its appearance and then validate it. Here's how -

it('adding expense', function(){
    var EC = protractor.ExpectedConditions;
    element(by.css('[ng-click="addExpenseDetails()"]')).click()
    //Verify toast after click event returns promise
    .then(function(){
        toast = $('.toast toast-error');
        browser.wait(EC.visibilityOf(toast), 20000) //wait until toast is displayed
        .then(function(){
            expect(toast.getAttribute('value')).toEqual('some value');
        });
    });
});

Hope this helps.

1
votes
it('adding expense', function(){
    var EC = browser.ExpectedConditions;
    element(by.css('[ng-click="addExpenseDetails()"]')).click()
    //Verify toast after click event returns promise
    .then(function(){
        toast = $('.toast-message');
        browser.wait(EC.visibilityOf(toast), 20000) //wait until toast is displayed
        .then(function(){
            expect(toast.getText()).toEqual('some value');
        });
    });
});