puppeteer 在按钮点击后等待页面更新（无导航）

Question

第一次尝试木偶戏，真是太棒了。单击按钮后，我需要等待页面获取并呈现新数据。这不会导致导航（网址相同），因此以下代码不起作用（它给出超时异常）：

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 选择器，您可以阅读这里和这里。它们功能强大且易于使用。

更新- 自定义等待谓词。

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

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);