javascript - puppeteer 按钮单击后等待页面更新(无导航)

Question

尝试puppeteer第一次，这太棒了。
单击按钮后，我需要等待页面获取和呈现新数据。这不会导致导航(网址相同)，因此以下代码不起作用(它给出超时异常):

await Promise.all([
    myButton.click()
    page.waitForNavigation()
])

等待页面在点击时获取/呈现异步数据的正确方法是什么？

Answer 1

假设 DOM 以某种方式发生变化，您可以等待特定元素或选择器。

也许会出现一个图像。

await myButton.click();
await page.waitForSelector('img.success');

也许某些具有 ID 属性的元素被插入到 DOM 中。

await myButton.click();
await page.waitForSelector('#newElementThatAppeared');

如果你不熟悉 DOM 选择器，可以阅读 here和 here .它们功能强大且易于使用。

更新 - 自定义等待谓词。

如果我们总是知道长度...

await myButton.click();
await page.waitFor(() => document.querySelectorAll('ul.specialList li').length > 5);

如果我们知道长度会增加

const listSize = await page.evaluate(() => document.querySelectorAll('ul.specialList li').length);
await myButton.click();
await page.waitFor(() => document.querySelectorAll('ul.specialList li').length > listSize);