Question

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

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

Answer 2

首先await Promise.all进行某种并发，如果需要 click ，然后 wait 用

拆分

await page.click('#selector');
const finalResponse = await page.waitForResponse(response => response.url() === 'https://example.com' && response.status() === 200);
return finalResponse.ok();

并成为noted：

此问题在页面导航到新URL或重新加载时解决。

Answer 3

好吧，虽然有点骇人听闻，但暂时没有找到更好的解决方案。基本上，我是在单击按钮之前和之后比较特定li元素的数量，以验证何时已加载新数据。

const wait = time => new Promise(resolve => setTimeout(resolve, time))

let data = await page.evaluate(_ => document.querySelectorAll("li.className").length) 

let isDataLoaded = false
await page.click("#myButton")

while(!isDataLoaded) {
    if (data.length !== await.page.evaluate(_ => document.querySelectorAll("li.className").length)) {
        isDataLoaded = true
    }
    await wait(100)
}

// new data should be loaded and rendered now in the page
// [...]

单击按钮后，操纵up等待页面更新（无导航）

3 个答案: