【问题标题】：Protractor test: Is it able to block/freeze the DOM during test execution?量角器测试：它是否能够在测试执行期间阻止/冻结 DOM？
【发布时间】：2020-01-15 13:38:47
【问题描述】：

我正在 Angular Web 应用程序中执行量角器测试。

测试用例：

在列表中查找元素。
遍历列表中的每个元素。
如果元素包含所需的名称。
点击元素。

代码：

let projectsList = await element.all(by.css(Selectors.projectList));
for (item of projectsList) {
    item.getText().then((text) => {
        if (text.includes("50_projects_to_tests")) {
            console.log(text)
            item.clik()
            
        }

    }, (err) => console.log(err));
}

问题：

测试用例很容易执行，除了一件事。每隔几秒钟发送一次有关更新项目信息的请求。当从服务器返回响应时，我丢失了之前选择的项目列表。

这意味着我无法点击我找到的元素，因为该元素不再存在。

我收到：

StaleElementReferenceError: stale element reference: element is not attached to the page document

问题：

是否可以在测试执行时阻止/冻结 DOM？

任何想法都可以处理这个问题。

【问题讨论】：

标签： javascript testing dom browser protractor

【解决方案1】：

在循环时获取过时的元素引用是一个常见问题

首先要注意的是，如果您已经在使用 async/await，则应尽量避免使用 .then() 来管理 Promise，这只会让事情变得更难阅读。

其次，如果最终用户与之交互时应用程序的工作方式不是这样，我会提醒不要禁用刷新。

下面的答案是基于页面刷新后element.all(by.css(Selectors.projectList));会找到相同元素的假设。在这个答案中，整个元素数组在每个循环期间被重新捕获，但它存储它需要的元素的索引值，以便循环继续

let projectsList = await element.all(by.css(Selectors.projectList));

for(let loopCount = 0; loopCount < projectsList.length; loopCount++){
    projectsList = await element.all(by.css(Selectors.projectList));

    const item = projectsList[loopCount];
    const itemText = await item.getText();

    if (itemText.includes("50_projects_to_tests")) {
        console.log(itemText )
        item.clik()
    }
}

【讨论】：