timeout - 使用 puppeteer，在 TimeoutError 上截图当前状态

Question

我尝试使用 puppeteer 对网站进行屏幕截图，但在速度较慢的网站上，我收到 TimeoutError。

在这种情况下，我想获取当前页面状态的屏幕截图 - 这可能吗？如果是这样，怎么办？

代码示例:

const puppeteer = require('puppeteer');

let url = "http://...";
let timeout = 30000;
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page
        .goto(url, {waitUntil: 'load', timeout: timeout}).then(async () => {
            await page
                .screenshot({path: 'example.png'})
                .catch(error => console.error(error));
        })
        .catch(error => {
            if (error.name === "TimeoutError") {
                // -----> calling await page.screenshot({path: 'example.png'}) gets stuck
            } else {
                console.error(error);
            }

        });
    await browser.close();
})();

Answer 1

在开发中使用puppeteer时不要使用browser.close，因为这可能会导致浏览器关闭和puppeteer崩溃。

const puppeteer = require('puppeteer')

let url = "https://www.tokopedia.com"
let filename = 'timeout.png'
let timeoutNum = 30000

;(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const [page] = await browser.pages ()

    page.setViewport ({ width: 1366, height: 768 })

    try {
        await page.goto(url, {waitUntil: 'networkidle0', timeout: timeoutNum}).then(async () => {
            await page.screenshot({ path: 'example.png', fullPage: true })
        })
    } catch (error) {
        if (error.name === "TimeoutError") {
            console.log (error.name)
            console.log (`Screenshot saved as ${filename}`)
            await page.screenshot({ path: filename, fullPage: true })
        } else {
            console.log (error)
        }
    }
})()