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

Question

我将 ngx-toastr 与我的 angular 2 应用程序一起使用，并且我已经开始针对它运行一些 e2e 测试。我在测试烤面包机时遇到了困难，因为它会在 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 的屏幕截图，我正在尝试在开始注册部分敬酒。请注意，名为 Default 的路由器插座不包装 start-signup，即使它在路由器中声明使用此插座 - 我不知道这是否是设计使然。

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

似乎 toastr div 不在 start-signup 标记内。即使使用 ngx-toastr 自己的方法将 toastr 消息移动到“您选择的”div 中，我也无法将其移动到内部。目前我将它放在 app.component 中，并将 toastr “holder” div 放在路由器插座旁边 - 我也尝试将 holder 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。

你可以试试这个sn-p

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(""))。

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

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

Answer 2

我想我找到了这个问题的根本原因。

事实证明 Protractor 在继续之前等待 Angular 完成待处理的工作，而 Toastr 会安排一个计时器在几秒钟后自动关闭消息。

所以你的元素查找器只会在 toast 从页面中删除一条消息后执行。

要解决此问题，您需要直接使用 browser.driver.findElements 方法（来自 Selenium WebDriver），而不是使用 Protractor 定位器。

这样你就可以访问任何元素，即使 Angular 在页面中还有一些工作要做。

Answer 3

我以前使用过 toastr，我通常在等待函数中检查 toastr 容器的可见性，然后如果需要，我会在之后接收消息。直接检查消息的问题是，如果消息没有提供给 toastr，那么它就不会附加到 dom 中，因为我记得库的内部结构。所以它可能是测试捕获的代码中的一个实际错误:)。所以我的建议是应该先检查容器的 precenseOf，然后再检查可见性和消息。这最终会告诉你是否有另一个元素——比如覆盖层没有放在烤面包机的顶部，从而阻止量角器认为它是可见的，这不太可能，因为它绝对定位在一些非常大的 z-index I想想。