Question

我正在使用ngx-toastr和我的角度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 Screenshot of 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(""))。

如果您向我展示更详细的dom，也许我可以向您推荐更多。

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

Answer 2

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

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

因此，只有在Toast从页面中删除一条消息后，您的元素查找器才会执行。

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

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

Answer 3

我以前使用过烤面包机，通常在wait函数中检查烤面包机容器的可见性，然后，如果需要的话，我在后面记了信息。直接检查消息的问题是，如果消息没有提供给烤面包机，那么自从我记得该库的内部结构以来，就不会将其附加到dom中。因此，这可能是测试中捕获的代码中的实际错误:)。因此，我的建议是应首先检查容器的precenseOf，然后再检查可见性和消息。最终，它将告诉您是否另一个元素（例如覆盖层）不位于烤面包机的顶部，从而防止量角器将其视为可见的，这不太可能，因为它的绝对Z索引位置非常大想。

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

3 个答案: