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
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.
I think I found the root cause of this issue.
It turns out Protractor waits for Angular to finish the pending work before continuing, and Toastr schedules a timer to automatically close the message after a few seconds.
So your element finder will only execute after toast removes a message from the page.
To fix this you need to use the browser.driver.findElements method directly (from Selenium WebDriver) instead of using Protractor locators.
That way you can access any element even if Angular has some work left to do in the page.
I've used the toastr before and I usually checked for the toastr container visibility in the wait function and then if I needed I've taken the message afterwards. The problem of checking for the message directly is that if the message is not provided to the toastr, then it wont be appended in the dom as of I could remember the internals of the library. So it might be an actual bug in the code that is caught by the test :). So my advice is that the precenseOf the container should be checked first and then visibility and the message. This eventually will tell you if another element - like an overlay doesn't sit on top of the toastr, thus preventing protractor to consider it visible, which is not very likely thou, as it was absolutely positioned with some very big z-index I think.