When getting an error from the server, I am showing a toastr (akveo nebular component) with the error message, like this.
The problem is, protractor can't seem to be able to find the newly created toastr.
Here is the testing bit, that is trying to get the span inside the alert. I've also tried the browser.wait(EC.presenceOf ... but with no luck.
const el = element(by.css('span.title.subtitle'));
expect(el.isPresent()).toBe(true);
Toastr: https://akveo.github.io/nebular/docs/components/toastr/overview#nbtoastrservice Toastr DOM element:
<nb-toastr-container class="ng-tns-c181-9 ng-star-inserted">
<nb-toast _nghost-oja-c180="" class="ng-tns-c181-9 ng-trigger ng-trigger-fadeIn status-danger destroy-by-click has-icon custom-icon ng-star-inserted" ng-reflect-toast="[object Object]">
<div _ngcontent-oja-c180="" class="icon-container ng-star-inserted" style="">
<nb-icon _ngcontent-oja-c180="" _nghost-oja-c87="" ng-reflect-icon="flash-outline" ng-reflect-pack="nebular-essentials"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24">
<g data-name="Layer 2">
<g data-name="flash">
<rect width="24" height="24" opacity="0"></rect>
<path d="M11.11 23a1 1 0 0 1-.34-.06 1 1 0 0 1-.65-1.05l.77-7.09H5a1 1 0 0 1-.83-1.56l7.89-11.8a1 1 0 0 1 1.17-.38 1 1 0 0 1 .65 1l-.77 7.14H19a1 1 0 0 1 .83 1.56l-7.89 11.8a1 1 0 0 1-.83.44zM6.87 12.8H12a1 1 0 0 1 .74.33 1 1 0 0 1 .25.78l-.45 4.15 4.59-6.86H12a1 1 0 0 1-1-1.11l.45-4.15z"></path>
</g>
</g>
</svg></nb-icon>
</div>
<!--bindings={
"ng-reflect-ng-if": "flash-outline"
}-->
<div _ngcontent-oja-c180="" class="content-container"><span _ngcontent-oja-c180="" class="title subtitle">Oops, Please check your email and password.</span>
<div _ngcontent-oja-c180="" class="message"></div>
</div>
</nb-toast>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object]"
}-->
</nb-toastr-container>
What am I doing wrong, and how to get a dynamically created element?
