Puppeteer 在加载时评估函数以显示警报答案

【问题标题】：Puppeteer evaluate function on load to show alertPuppeteer 在加载时评估函数以显示警报
【发布时间】：2021-09-25 17:55:46
【问题描述】：

我是 puppeteer 的新手，我不明白为什么下面的代码不能工作。任何解释将不胜感激。

const puppeteer=require("puppeteer");
(async () => {
    const browser = await puppeteer.launch({headless:false});
    const page = await browser.newPage();
    await page.goto('https://bet254.com');
    await page.evaluate(async ()=> {
        window.addEventListener("load",(event)=>{
            document.alert("Loaded!");
        })
    });

})();

我期待加载后出现警报。但是什么也没发生！如何添加侦听器以在页面加载时显示警报？

【问题讨论】：

将您的 IIFE 放入 try/catch 块并检查您可能遇到的任何错误。
我没有错误...

标签： javascript asynchronous puppeteer headless

【解决方案1】：

page.goto 已经在等待页面加载，因此当您的evalute 运行时，您无法重新等待页面加载，因此load 事件将永远不会触发。

另一个问题是document.alert 不是一个函数。您可能会想到document.write 或window.alert。无论如何，这两个函数对于调试都不是特别有用，所以我建议坚持使用console.log，除非你有非常令人信服的理由不这样做。

在使用 Puppeteer 时，重要的是通过在没有 Puppeteer 的浏览器中手动运行 evaluate 代码来隔离问题，否则您可能不知道是 Puppeteer 失败了，还是只是普通的旧的坏浏览器代码。

在evaluate 中记录的任何内容都不会显示在您的节点标准输出或标准错误中，因此您可能需要使用log listener 来监控它。您需要同时查看 Node 和浏览器控制台是否有错误。

根据您要完成的任务，page.evaluateOnNewDocument(pageFunction[, ...args]) 将允许您在导航时附加代码以进行评估，这可能是您在此处尝试的目标。

这里是一个头部警告的例子：

const puppeteer = require("puppeteer");

let browser;
(async () => {
  browser = await puppeteer.launch({headless: false});
  const [page] = await browser.pages();
  await page.evaluateOnNewDocument(() => {
    window.addEventListener("load", event => {
      alert("Loaded!");
    });
  });
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

使用console.log:

const puppeteer = require("puppeteer");

const onPageConsole = msg =>
  Promise.all(msg.args().map(e => e.jsonValue()))
    .then(args => console.log(...args))
;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  page.on("console", onPageConsole);
  await page.evaluateOnNewDocument(() => {
    window.addEventListener("load", event => {
      alert("Loaded!");
    });
  });
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

如果您只想在加载后运行一些代码，那么您甚至可能根本不需要将侦听器附加到加载事件：

const puppeteer = require("puppeteer");

const onPageConsole = msg =>
  Promise.all(msg.args().map(e => e.jsonValue()))
    .then(args => console.log(...args))
;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  page.on("console", onPageConsole);
  await page.goto("https://bet254.com", {waitUntil: "networkidle0"});
  await page.evaluate(() => console.log("Loaded!"));
})()
  .catch(err => console.error(err))
  .finally(async () => await browser.close())
;

【讨论】：