如何加速木偶操作？

Question

网页有一个按钮，木偶操作者必须尽快单击该按钮，按钮变为可见。此按钮并非始终可见，而是同时对所有人可见。所以我必须不断刷新才能发现按钮变得可见。我写了下面的脚本来做到这一点：

    const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox']
    });
    const page = await browser.newPage()
    await page.setViewport({ width: 1920, height: 1080})


//I am calling my pageRefresher method here

async function pageRefresher(page,browser, url) {
        try {
            await page.goto(url, {waitUntil: 'networkidle2'})
            try {
                await page.waitForSelector('#ourButton', {timeout: 10});
                await page.click('#ourButton')
                console.log(`clicked!`)
                await browser.close()
            } catch (error) {
                console.log('catch2 ' + counter + ' '  + error)
                counter += 1
                await pageRefresher(page, browser, url)
            }
        }catch (error) {
            console.log('catch3' + error)
            await browser.close();
        }
}

如您所见，我的方法是递归的。它转到那个页面并寻找那个按钮。如果没有按钮，则它会再次调用自己以重做相同的工作，直到找到并单击该按钮。

实际上它现在运行良好。但它很慢。我正在运行这个脚本，同时我在我的桌面 chrome 上打开同一个页面，我开始手动刷新该页面。我总是赢，我总是在木偶操纵者之前点击那个按钮。

我怎样才能加快这个过程？脚本不应该输给只有手动控制（如 F5 按钮）的人。

Answer 1

脚本不应该输给只有手动控制（如 F5 按钮）的人。

发生这种情况是因为有时 puppeteer 遵循的规则比我们认为的“完全加载的网页”要严格得多。即使您作为人类可以决定您想要的元素是否已经在 DOM 中（因为您看到该元素在那里）或者它不在那里（因为您没有看到它）。例如：即使背景图像仍在后台加载，或者 webfonts 仍未加载并且您有后备字体，您也会看到您的按钮不存在，但 puppeteer 会在后台等待特定事件以获得许可要么转到 catch 块（超时），要么获取所需的元素（waitForSelector 成功）。这实际上取决于您正在访问的网站，但您可以加快识别所需元素的过程。

我给出了一些例子和想法，你可以如何实现这一点。

加速识别所需元素的方法

1.) 如果您的任务不需要每个网络连接，您可以通过替换waitUntil: 'networkidle2'to 来加速页面加载，waitUntil: 'domcontentloaded'因为此事件通常发生得更早，并且会#ourButton在 DOM 中已经存在时触发。

page.goto/的可能选项page.reload：

• load- 考虑在load触发事件时完成导航。
• domcontentloaded- 考虑在DOMContentLoaded触发事件时完成导航。
• networkidle0- 当至少500ms 的网络连接数不超过 0 时，考虑完成导航。
• networkidle2- 考虑在至少500ms内没有超过 2 个网络连接时完成导航。

你因为networkidle2太严格而赢得了剧本。您可能需要此选项（例如，您正在访问单页应用程序或稍后您将需要来自 3rd 方网络连接的数据，例如 cookie），但如果不是强制性的，您将体验到更好的性能domcontentloaded。

2.) 您可以page.reload在循环中使用方法，而不是不断导航到相同的 url ，例如：

await page.goto(url, { waitUntil: 'domcontentloaded' })
let selectorExists = await page.$('#ourButton')

while (selectorExists === null) {
  await page.reload({ waitUntil: 'domcontentloaded' })
  console.log('reload')
  selectorExists = await page.$('#ourButton')
}
await page.click('#ourButton')
// code goes on...

它的主要好处是您可以缩短和简化您的pageRefresher功能。但是我也体验到了更好的性能（但是我没有进行基准测试，但我觉得它比重新打开页面要快得多）。

3.) 如果您的任务不需要每种资源类型，您还可以通过使用以下脚本禁用图像或 css 来加速页面加载：

await page.setRequestInterception(true)
page.on('request', (request) => {
  if (request.resourceType() === 'image') request.abort()
  else request.continue()
})

[来源]

资源类型列表-s。

Answer 2

尝试不等待 goto：

page.goto(url) // no await because it doesn't have to resolve fully
await page.waitForSelector('#ourButton') // await this because we need it to be there

有些人喜欢 Promise.race，但这种方式更简单