angularjs - 如何检查元素是否不再存在于页面中？

Question

我定义了一个指令，它可以用在一个按钮上，如果按钮被点击，它会从文档中移除一些元素，代码如下:

.directive("mydirective", function() {
  return {
     link: function(scope, element) {
        element.bind('click', function() {
           $timeout(function() {
               angular.element("#aaa").remove();
           }, 1000);
        });
     }
});

现在我想用 Protractor 测试一下，代码如下:

$("#mybutton").click();   // the button has the 'mydirective'

// wait until "#aaa" is removed
browser.wait(function() {
    var deferred = protractor.promise.defer();
    $("#aaa").isPresent().then(function(data) {       // !!!!
        deferred.fulfill(!data);
    });
    return deferred.promise;
}, 2000);

// checking
expect($("#aaa").isPresent()).toBe(false);

但是当我运行测试时，它会报告:

Error: Locator cannot be empty

在代码中的 !!!! 行。

为什么以及如何解决？

Answer 1

为什么不使用 ElementFinder :

The ElementFinder can be treated as a WebElement for most purposes, in particular, you may perform actions (i.e. click, getText) on them as you would a WebElement. ElementFinders extend Promise, and once an action is performed on an ElementFinder, the latest result from the chain can be accessed using then. Unlike a WebElement, an ElementFinder will wait for angular to settle before performing finds or actions.

element(by.id('mybutton')).click();
expect(element(by.id('aaa')).isPresent()).toBe(false);

更新。结果是 isElementPresent()最终在这种情况下起作用:

expect(browser.isElementPresent(by.id('aaa'))).toBe(false);