如何在Puppeteer接收console.log('page-completed')后执行截图？

原代码 #

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({
        args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 3840, height: 2160 });
    await page.goto("https://example.com");
    page.on("console", (message) => {
        console.log(
            `${message.type().substr(0, 3).toUpperCase()} ${message.text()}`
        );
        if (message.text() == "page-completed") {
             process.exit(0);
        }
    });
    await new Promise((r) => setTimeout(r, 10000));

    await page.screenshot({ path: "example.png", fullPage: true });
    await browser.close();
})();

问题描述 #

将截图代码移至process.exit(0)上方时，会提示“await只能在async函数中使用”，需要实现接收到“page-completed”日志后执行截图操作。

解决方案 #

问题核心在于console事件的回调函数不是async函数，无法直接使用await。只需把回调改成async函数，在内部完成截图、关闭浏览器后再退出进程即可，同时移除原本的超时等待和后续的截图逻辑：

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({
        args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });
    const page = await browser.newPage();
    await page.setViewport({ width: 3840, height: 2160 });
    await page.goto("https://example.com");
    
    // 将回调改为async函数
    page.on("console", async (message) => {
        console.log(
            `${message.type().substr(0, 3).toUpperCase()} ${message.text()}`
        );
        if (message.text() === "page-completed") {
            // 执行截图
            await page.screenshot({ path: "example.png", fullPage: true });
            // 关闭浏览器
            await browser.close();
            // 退出进程
            process.exit(0);
        }
    });
})();

说明 #

• 把console事件的回调声明为async后，就能在内部使用await调用异步的截图和关闭浏览器方法。
• 移除了原本的10秒超时等待，改为由“page-completed”日志触发后续操作，更符合需求逻辑。

内容的提问来源于stack exchange，提问作者bilogic