Puppeteer 评估加载功能以显示警报

Question

我是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!");
        })
    });

})();

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

Answer 1

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

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

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

在 evaluate 中登录的任何内容都不会显示在您的节点标准输出或标准错误中，因此您可能希望使用对其进行监控。您需要查看 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())
;

Puppeteer 评估加载功能以显示警报

Puppeteer evaluate function on load to show alert

javascript

asynchronous

puppeteer

headless