剧作家如何等待匹配多个元素的定位器不可见答案

【问题标题】：Playwright how to wait for locator that matches multiple elements to not be visible剧作家如何等待匹配多个元素的定位器不可见
【发布时间】：2022-02-01 01:18:53
【问题描述】：

我正在尝试等待指示页面仍在加载并且多次存在于页面上的元素不可见（想想带有加载数据占位符的表格）。

Playwright 文档建议使用定位器是最佳实践，因此我最初尝试通过以下方式实现：

locator.waitFor({state: "hidden")

但是由于定位器是严格的并且只允许匹配一个元素而导致的错误。

我现在正在使用以下代码：

page.waitForSelector(".foo .bar", {state: "hidden"})

由于以下几个原因，这并不理想：

我将页面元素作为定位器存储在页面对象模型中，您似乎无法访问定位器的选择器，这意味着选择器在代码中重复
我相信 page.waitForSelector 会使用不鼓励使用的 ElementHandle

有什么方法可以关闭定位器的严格约束？或使用定位器实现此目的的方法。我知道您可以在匹配多个元素的 Locator 上执行 .count，但我还没有找到一种将其与等待计数为 0 相结合的好方法。

【问题讨论】：

那么使用playwright.dev/docs/locators#lists 并等待每个定位器上的可见状态对您不起作用？
@madflow 啊，不，我在文档中看了一眼，不明白这是做什么的！我现在有一个可行的解决方案（循环获取所有元素的隐藏状态并等待它们全部为真，或者超时）。

标签： node.js playwright

【解决方案1】：

希望它会起作用每次前一个元素消失时，此代码都会检查下一个元素

while (await page.locator('.foo .bar').first().isVisible()) { //do nothing }

【讨论】：

如果它们永远不可见，这可能会让你陷入无限循环。我现在有一个使用evaluateAll 函数的工作解决方案。
相当不错的解决方案。谢谢

【解决方案2】：

我最终使用evaluateAll 方法完成了这项工作。示例代码：

async waitForAllHidden(locator: Locator, timeout: number = 10000) {
    const start = Date.now()
    const elementsVisible = async () => (await locator.evaluateAll(elements => elements.map(element => element.hidden))).includes(false)

    while (await elementsVisible()) {
        if (start + timeout < Date.now()) {
            throw(`Timeout waiting for all elements to be hidden. Locator: ${locator}. Timeout: ${timeout}ms`);
        }
    }
    console.log(`All elements hidden: ${locator}`)
}

【讨论】：