javascript - 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 已经等待页面加载，因此当您的 evaulate 运行时，您无法重新等待页面加载，因此load 事件永远不会触发。

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

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

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

根据您想要实现的目标，page.evaluateOnNewDocument(pageFunction[, ...args])将允许您附加代码以在导航时进行评估，这可能就是您在这里尝试的。

这是一个头脑清醒的例子:

const puppeteer = require("puppeteer"); // ^19.6.3

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://www.example.com", {waitUntil: "load"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

headless (headless)使用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 => {
      console.log("Loaded!");
    });
  });
  await page.goto("https://www.example.com", {waitUntil: "load"});
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

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

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://www.example.com", {waitUntil: "load"});
  await page.evaluate(() => console.log("Loaded!"));
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

或者，如果您要运行的代码是纯粹的 Node，只需使用正常的控制流:

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

顺便说一句，没有必要使函数异步，除非你在某个地方有await。

另请参阅Puppeteer wait until page is completely loaded .