javascript - 使用 Protractor 测试 UI-bootstrap-alert

Question

我正在尝试使用 Protractor 来测试我的警报是否正确显示。这是我的规范文件之一。

HTML 代码看起来像

<div class="alert ng-scope floater bottom left fadeZoomFadeDown alert-success" 
ng-class="[type ? 'alert-' + type : null]" 
style="display: block;"><!-- ngIf: dismissable -->
  <button type="button" class="close ng-scope" ng-if="dismissable" ng-click="$hide()">
  </button><!-- end ngIf: dismissable --> <strong ng-bind="title" class="ng-binding"></strong>&nbsp;
 <span ng-bind-html="content" class="ng-binding">Test Person added successfully. </span>
</div>

此警报的 spec.js 文件

it('should be able to add a person to the person list from the list person view', function() {
    element(by.linkText('Persons')).click();
    personsUrl = browser.getCurrentUrl();

    count = element.all(by.repeater('person in persons')).length;
    element(by.linkText('Add Person')).click();
    element(by.id('person.firstName')).sendKeys('Test Person');

    //After adding person return to the persons list view.
    var alertElement = element(by.css('.alert-success'));
    element(by.buttonText('Add Person')).click().then(function(){
        expect(browser.getCurrentUrl()).toEqual(personsUrl);
        browser.wait(protractor.ExpectedConditions.visibilityOf(alertElement), 10000) //Wait for 10 seconds until alert is visible
        .then(function(){ 
             expect(alertElement.isDisplayed()).toBe(true);
        });
    });
});

终端返回错误消息“失败:使用定位器未找到元素:By.cssSelector(”.alert-success”)”，但是当我手动测试并暂停浏览器时，我可以检查警报并查看它有几个类，警报成功绝对是其中之一。我只是不明白我做错了什么。

提前致谢

Answer 1

我想警报不会立即可见，也不会一直显示在 DOM 上。所以你必须等到它可见，然后对它执行操作。方法如下 -

var alertElement = element(by.css('.alert-success'));
element(by.buttonText('Add Tenant')).click().then(function(){
    browser.wait(protractor.ExpectedConditions.visibilityOf(alertElement), 10000) //Wait for 10 seconds until alert is visible
    .then(function(){ 
         expect(alertElement.isDisplayed()).toBe(true);
         //Other operations on alert
    });
});

希望对您有所帮助。