angular - 如何在 Angular 2 中使用 Protractor 测试 ngx-toastr

Question

我在我的 angular 2 应用程序中使用 ngx-toastr，并且我已经开始针对它运行一些 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 Screenshot of DOM 的屏幕截图，我正在尝试在开始注册部分中 toast 。请注意，名为 Default 的路由器导出不会包装开始注册，即使它在路由器中声明使用此导出 - 我不知道这是否是设计使然。

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

似乎 toastr div 不在 start-signup 标记内。我无法将它移动到内部，即使使用 ngx-toastr 自己的方法将 toastr 消息移动到“您选择的”div 中也是如此。目前我将它放在 app.component 中，并将 toastr“holder”div 放在路由器 socket 旁边 - 我也尝试将 holder div 放在路由器 socket 内，但运气不佳。

我从 Protractor 得到的错误是:

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

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

如果您向我展示更详细的 dom，我可能会为您提供更多建议。

我认为 5 秒后消失对于 Protractor 来说不是问题，因为它在 Angular 元素上是异步的。