javascript - Puppeteer:等到 elementHandle 不再附加到 DOM

Question

所以，我遇到了这个问题，这里和那里渲染了一些微调器，我想等到微调器不再附加在 DOM 中。

不太了解 JS，但在 Selenium 中你可以使用像这样的谓词:

Wait.Until(driver => driver.findElements(By.Xpath("XPATH")).Count < 0) .

到目前为止，我已经完成了以下工作:

    async fillSearch(value: string) {
            await this.searchInput.then(x => x.click({ clickCount: 3 }));
            await this.page.keyboard.press("Backspace");
            await this.searchInput.then(x => x.type(value));
            ...//HERE I HAVE TO WAIT FOR THE SPINNER TO GO...
        }

this.searchInput是 Promise<ElementHandle>由 page.$x("xpathOfInput") 检索.

我有一个 Prop 叫做 this.spinners检索 Promise<ElementHandle[]>所以当 Promise 解决时，我可以获得 lenght数组并知道是否有任何元素建立在 DOM 上。

所以问题是:

有没有办法使用类似 page.waitFor() 的东西？等待 promise 得到解决，然后比较 if spinners.length < 0等到那发生？

我想一定有一种方法可以通过 waitFor 上的谓词实现相同的目的，但到目前为止我无法设法将其拉出来...

Answer 1

使用page.waitForXPath

最简单的方法是使用 page.waitForXPath将选项 hidden 设置为 true:

await page.waitForXPath('XPATH', { hidden: true });

这将等到该元素不再出现在 DOM 中或隐藏(通过 CSS)。

替代方案:page.waitForFunction

或者，您可以使用 page.waitForFunction等待您提供的函数返回 true。通过使用 document.evaluate要评估 XPath 表达式，您可以等到条件解析为 true。

使用现有变量

因为您已经在变量中拥有该元素，所以您可以使用 page.waitForFunction并将元素作为 args 传递:

await page.waitForFunction(element => element.parentNode === null, {}, spinnerElement);

您可能需要根据删除节点的方式更改检查功能。