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

Question

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

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

locator.waitFor({state: "hidden")

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

我现在用下面的代码来做：

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

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

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

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

Answer 1

希望它能奏效每当前一个元素消失时，此代码将检查下一个元素

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

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

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

Playwright how to wait for locator that matches multiple elements to not be visible

node.js

playwright