如何在Angular 2中使用量角器测试ngx-toastr

Question

我正在使用ngx-toastr和我的angular 2应用程序,我已经开始对它运行一些e2e测试.我在测试toastr时遇到困难,因为它弹出并在5秒后消失.

我已经尝试在Stackoverflow上添加几种不同的选择方法,但没有运气.

我尝试过的:

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');
}

这使得它击中了不可见的代码,尽管我看到窗口中存在的toastr - 它无法在dom中找到它.我已经拍摄了dom的截图,向您展示了我认为它可能与此有关的位置.

这是dom 屏幕截图的屏幕截图,我正试图在start-signup部分进行烘烤.请注意,名为Default的路由器插座不包装启动注册,即使它已在路由器中声明使用此插座 - 我不知道这是否是设计的.

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

似乎toastr div不在start-signup标记内.我无法将其移入内部,即使使用ngx-toastr自己的方法将toastr消息移动到"您选择的"div中.目前我将它放在app.component中,并将toastr"holder"div放在路由器插座旁边 - 我也尝试将持有者div放在路由器插座内,但也没有运气.

我从量角器得到的错误是:

    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.

如果需要,我可以提供更多信息.这是我能想到的初始信息.

亲切问候克里斯

Answer 1

我想我需要针对上述问题提供更多信息。Dom 屏幕截图还不够。如果能在代码中显示完整的 dom 就好了。而不是截图。但无论如何，如果我的猜测是正确的，你甚至不需要 ExpectedConditions。

你可以试试这个片段

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);
});

如果您想测试烤面包机中的消息/文本，您也可以尝试element(by.cssContainingText(""))。

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.