Question

使用异步/等待，如何处理等待页面加载直到读取页面？

我在网站上运行了很长时间的PHP cron。为了解决超时问题，它将问题分解成几部分，将浏览器重定向到下一步，最后以die('Done');结尾，这意味着页面的最终html看起来像这样。

<html>
    <head></head>
    <body>Done</body>
</html>

因此，我尝试使用Puppeteer来运行长时间运行的脚本，然后放开它，直到我得到“完成”以结束测试。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args:['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://example.com/Test/', {waitUntil: 'networkidle2'}); //dev
  //await page.screenshot({path: 'example.png'});

  // Eventually if script runs, will get run in PHP die('Done') so select text and quit.
  // await page.waitForNavigation();
  let element = await page.$("body").catch(() => {});
  let text = await page.evaluate(element => element.textContent, element).catch(() => {});

  if (text == 'Done') {
    await browser.close();
  }
})();

现在，在仅执行重定向而不是数据处理的测试站点上，它可以正常工作并关闭。在实际处理数据的页面上，element和text的值均未定义。

Answer 1

如果您可以向<div id="done">Done!</div>之类的元素添加ID，则可以尝试使用await page.waitForSelector('#done')之类的page.waitForSelector()方法。

首先稍微修改PHP，因为它首先不会发出有效的HTML。请注意，这些等待会超时，因此请禁用超时。最后，切换到text.includes进行检查，因为文本的值周围可能带有空格，从而使它的计算结果为false。

海报的最终代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args:['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://example.com/Test/', {waitUntil: 'networkidle2'});

  // Eventually if script runs, will get run in PHP die('Done') so select text and quit.
  await page.waitForSelector('#done', {timeout: 0});
  let element = await page.$("body").catch(() => {});
  let text = await page.evaluate(element => element.textContent, element).catch(() => {});

  if (text.includes("Done")) {
    await browser.close();
  }
})();

在Puppeteer中进行异步/等待，直到页面加载

1 个答案: