protractor StaleElementReferenceError: 元素不再附加到DOM上

Question

在我的Angular应用程序中，当用户打开页面时，我们首先加载缓存内容，然后跟随异步调用服务器来轮询实际数据并更新页面。我试图访问已经显示的元素，但是由于页面内容被更新，该元素的指针已更改，即使该特定元素上没有实际更改。我尝试了不同的解决方案，但仍无法像我想要的那样稳定。我需要类似于try/catch块的东西，因为我不想使用browser.wait。

从描述中看起来...

browser.waitForAngular(); 

应该处理 $http 请求，但是它没有起作用。

这里是一段代码示例：

    element(by.id('closeEditTagsModal')).click();
    helper.waitElementToDisappear(element(by.css('body[class$="modal-open"]')));
    element(by.id('myBookingsTab')).click();
    helper.waitElementToDisappear(element(by.css('body[class$="loading"]')));
    try {
           (helper.waitElementToBeShown(element(by.repeater('b in currentbookings').row(0)).element(by.cssContainingText('.tagPill', 'TestTag')))).then(function() {
        }, function(err) {
            console.log('element was not found');
            throw err;
        });
    }
    catch (err) {
        helper.waitElementToBeShown(element(by.repeater('b in currentbookings').row(0)).element(by.cssContainingText('.tagPill', 'TestTag')));
    }

这里有另一个示例，我尝试使用try/catch，但似乎做错了什么。我在try块中遇到了以下错误：

StaleElementReferenceError: Element is no longer attached to the DOM

我的帮助函数代码如下：

var waitElementToBeShown = function (elm) {
browser.wait(function () {
    return elm.isPresent();
},10000);
browser.wait(function () {
    return elm.isDisplayed();
},10000);
};

我正在尝试等待元素可供交互。

- Sergey Teplyakov

Answer 1

我怀疑错误是由于两次调用 browser.wait 之间 DOM 发生了变化。你应该传递一些更加间接的东西而不是将 elementPromise 传递给 browser.wait。你可以直接传递定位器：

var waitElementToBeShown = function (elmLoc) {
  browser.wait(function () {
    return element(elmLoc).isPresent();
  },10000);
  browser.wait(function () {
    return element(elmLoc).isDisplayed();
  },10000);
}

但是你并不总是有一个简单的定位器表达式。也许可以传入一个查找元素的函数？这样每次等待时，查找都会重新评估：

var waitElementToBeShown = function (elmFunc) {
  browser.wait(function () {
    return elmFunc().isPresent();
  },10000);
  browser.wait(function () {
    return elmFunc().isDisplayed();
  },10000);
}

然后你可以这样调用它：

waitElementToBeShown(function() {
  return element(by.repeater('b in currentbookings').row(0)).element(by.cssContainingText('.tagPill', 'TestTag')));
});

我对这个答案并不完全有信心，但似乎应该能够正常运作...

- P.T.

---

我通过请求开发人员添加标志来解决这种问题，以指示我们已收到成功回调。我不确定这是否是做此类事情的最佳方法，但看起来对我有用。我也会尝试您的解决方案。 - Sergey Teplyakov