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

Question

第一次尝试木偶戏 ，真是太神奇了。 单击按钮后，我需要等待页面获取和呈现新数据。 这不会导致导航（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选择器，则可以在此处和此处阅读。 它们功能强大且易于使用。

更新 -自定义等待谓词。

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

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

好吧，虽然有点骇人听闻，但暂时没有找到更好的解决方案。 基本上，我在单击按钮之前和之后比较特定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
// [...]

Answer 3

首先await Promise.all某种并发性，如果需要单击 ，然后等待与

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

并注意 ：

当页面导航到新URL或重新加载时，此问题得以解决。