如何在 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 的屏幕截圖 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 放在路由器插座旁邊 - 我也嘗試將支架 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

我想我找到了這個問題的根本原因。

事實證明，Protractor 在繼續之前等待 Angular 完成待處理的工作，而 Toastr 會安排一個計時器在幾秒鍾后自動關閉消息。

所以你的元素查找器只會在 toast 從頁面中刪除一條消息后執行。

要解決此問題，您需要直接使用browser.driver.findElements方法（來自 Selenium WebDriver）而不是使用量角器定位器。

這樣你就可以訪問任何元素，即使 Angular 在頁面中還有一些工作要做。

Answer 3

我之前使用過 toastr，我通常會在等待函數中檢查 toastr 容器的可見性，然后如果需要，我會在事后獲取消息。 直接檢查消息的問題是，如果消息沒有提供給 toastr，那么它不會被附加到 dom 中，因為我記得庫的內部結構。 因此，它可能是測試捕獲的代碼中的實際錯誤:)。 所以我的建議是先檢查容器的 precenseOf，然后檢查可見性和消息。 這最終會告訴你是否有另一個元素——比如覆蓋層沒有位於 toastr 的頂部，從而防止量角器認為它是可見的，你不太可能，因為它絕對定位在一些非常大的 z-index I思考。