How to test ngx-toastr with protractor in Angular 2

Question

I'm using ngx-toastr with my angular 2 application and i've started running some e2e tests against it. I'm having difficulties testing the toastr as it pops up and dissapears after 5 seconds.

I've tried adding several different selection methods as suggested on Stackoverflow, without luck.

What i've tried:

getToastr() {
    var EC = protractor.ExpectedConditions;
    var targetEle = element(by.css(".toast-message"));

    browser.wait(EC.visibilityOf(targetEle), 10000, 'NOT VISIBLE'); //wait until 
    //ele visible
    browser.wait(EC.presenceOf(targetEle), 10000, 'NOT PRESENT');
}

which makes it hit the not visible code, eventhough i see the toastr present in the window - it is not able to find it in the dom. I've taken a screenshot of the dom to show you the position as i think it may have something to do with this.

Here's a screenshot of the dom Screenshot of DOM, i'm trying to toast within the start-signup section. Note that the router-outlet named Default does not wrap start-signup, even though it's declared in the router to use this outlet - i don't know if this is by design or not.

{
    path: 'signup',
    children: [
        { path: '', component: StartSignupComponent, outlet: 'default' }
    ]
},

It appears as though the toastr div is not inside the start-signup tag. I haven't been able to move it inside, even with the ngx-toastr's own method to move the toastr message inside a div "of your choosing". Currently i placed it in app.component, and placed the toastr "holder" div next to the router outlet - i also tried placing the holder div within the router-outlet without luck as well.

The error i get from protractor is:

    1) Create account page should have a toastr message
  - Failed: NOT VISIBLE
Wait timed out after 10334ms

Executed 28 of 28 specs (1 FAILED) in 18 secs.
[14:01:29] I/launcher - 0 instance(s) of WebDriver still running
[14:01:29] I/launcher - chrome #01 failed 1 test(s)
[14:01:29] I/launcher - overall: 1 failed spec(s)
[14:01:29] E/launcher - Process exited with error code 1
npm ERR! Test failed.  See above for more details.

I can provide more information if need be. This was the initial information that i could think of.

Kind regards Chris

Answer 1

I think i would require more information for the above question. The Dom Screenshot is not sufficient. It would be good if you can show the full dom in code. rather than screenshot. But anyway, if my guess is right you dont even need ExpectedConditions.

You can just try this snippet

var targetEle = element(by.css(".toast-top-right"));
var expectedEle = element(by.css(".toast-message"));

expect(targetEle.isPresent()).toBe(true).then(function(){
    expect(expectedEle.isDisplayed()).toBe(true);
});

If you want to test the message/text in the toaster may be you can try element(by.cssContainingText("")) too.

May be if you show me more detailed dom i could be able to suggest you more.

I don't think disappearing after 5 seconds is not a problem with respect to protractor since it is asynchronous on angular elements.