angularjs - 如何使用 Protractor 验证 Angular Js 的 Toaster？

Question

我是使用 Protractor 测试 Angular js 应用程序的新手。 我有一个提交按钮，单击它后，窗口上会弹出 toastr 消息。

提交按钮位于下方。

   <button title="Add the Expense Claim" ng-show="addExpDetailsShow" class="btn btn-primary btn-sm" ng-click="addExpenseDetails()">Add</button>

Toaster div如下

<div class="toast-top-right" id="toast-container"><div style="" class="toast toast-error"><button class="toast-close-button">×</button><div class="toast-message">Select Expense Type.<br>Amount should be between 0.10 to 100000000.</div></div></div>

现在我需要验证 toastr 是否显示，并且需要验证 toastr 消息。我正在使用 Jasmine 来编写我的测试用例。通过谷歌搜索我写了下面的代码。

it('adding expense', function(){

    element(by.xpath(".//*[@id='navbar-collapse']/ul[1]/li[2]/a")).click();
    element(by.xpath(".//*[@id='main-container']/div[1]/div/div/div[3]/div/button[1]")).click();    
    element(by.css('[ng-click="addExpenseDetails()"]')).click();
    toast = $$('.toast toast-error');
    browser.manage().timeouts().implicitlyWait(1000);
    expect(toast.getAttribute('value')).toEqual('some value');
     expect(toast.isDisplayed()).toBe(true);

});

Answer 1

验证 toastr 与验证 Protractor 中的任何其他元素类似。然而，挑战是在它出现和消失的时间范围内进行验证。要验证其详细信息，请尝试等待其出现，然后进行验证。方法如下 -

it('adding expense', function(){
    var EC = protractor.ExpectedConditions;
    element(by.css('[ng-click="addExpenseDetails()"]')).click()
    //Verify toast after click event returns promise
    .then(function(){
        toast = $('.toast toast-error');
        browser.wait(EC.visibilityOf(toast), 20000) //wait until toast is displayed
        .then(function(){
            expect(toast.getAttribute('value')).toEqual('some value');
        });
    });
});

希望这有帮助。