javascript - Protractor 测试: Is it able to block/freeze the DOM during test execution?

Question

我正在 Angular Web 应用程序中执行 Protractor 测试。

测试用例:

1. 在列表中查找元素。

2. 循环遍历列表中的每个元素。

3. 如果元素包含所需的名称。

4. 单击该元素。

代码:

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:过时的元素引用:元素未附加到页面文档

问题:

测试执行时是否可以阻止/卡住 DOM？

任何解决该问题的想法都是值得赞赏的。

Answer 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()
    }
}