Puppeteer白色或灰色截图。

Question

我正在尝试截取网页中所有表格元素的屏幕截图。对于一些网页来说，这个功能完美运行，我能够成功地截取屏幕截图。但是对于一些网站来说，这个功能不起作用。我能够截取屏幕截图，但是它们大多数都是白色或灰色的。以下是我使用的代码。

const puppeteer = require('puppeteer');
const jsonfile = require('jsonfile');
        
const getWebImages = async(pageToGo, link) => {
    puppeteer.launch({
        args: ['--start-maximized'],
        headless: false,
        defaultViewport: null
    }).then(async (browser) => {
        const page = await browser.newPage();
        await page.goto(pageToGo, {waitUntil: 'networkidle2', timeout: 60000});
        const VIEWPORT = {width: 1366, height: 768 }; // Your default values
        boxes2 = [];
          
        const getData = async (link) => {
            return page.evaluate(async (link) => {
                return await new Promise(resolve => {
                    var rects = [];
                    const element = document.querySelectorAll('table');
                    element.forEach(function (item, index) {
                        var box = item.getBoundingClientRect();
                        rects.push({
                            x: box.left,
                            y: box.left,
                            width: box.width,
                            height: box.height,
                            id: index
                        })
                    })
                    return resolve(rects);
                })
            }, link);
        }
    
        const getImages = async (rect) => {
            for (const item of rect) {
                try {
                    await page.screenshot({
                        path: 'data\\_table_' + item.id + '.png',
                        clip: {
                            x: item.x,
                            y: item.y,
                            width: item.width,
                            height: item.height
                        }
                    });
                } catch (e) {
                    console.log(e)
                }
            }
        }
        boxes2 = await getData(link);
        images = await getImages(boxes2);
        console.log(boxes2)
        await browser.close();
    });
}
  
getWebImages("https://www.csb.gc.ca/rates/", 11);

我尝试了不同的屏幕尺寸和等待所有内容加载等其他方法。当我在浏览器中查看时，我可以清楚地看到页面加载完成后截图被拍摄，但是图片要么只是白色屏幕，大小与表格区域相同。

注意：我还下载了一些网页进行离线处理，但仍然无法正常工作。

- Waqar Haider

---

这很可能是因为您在页面加载时截屏了。 - D. Pardal

我尝试了这个await page.goto(pageToGo, {waitUntil: 'networkidle2'});。 - Waqar Haider

但为什么其他页面能够正常工作，我不确定等待是问题所在。因为有一些网站需要更多的时间，但我仍然能够获取截图。 - Waqar Haider

Answer 1

我的问题是我在goto()之后设置了我的viewport，我将代码更改为以下内容;

`const puppeteer = require('puppeteer');

async function run(url) {
    let browser = await puppeteer.launch({ headless: true });
    let page = await browser.newPage();
    const VIEWPORT = { width: 1360, height: 780}
    boxes2 = [];
    await page.setViewport(VIEWPORT);
    await page.goto(url, { waitUntil: 'domcontentloaded'});
    await page.waitFor('table');
    await page.waitForSelector('table');
    const el = await page.$$('table');
    for(let i = 0; i < el.length; i++){
        // await console.log(el[i].getBoundingClientRect());
        await el[i].screenshot({
            path: 'link_' +i+ '.png',
        })
    }
    // await processScreens(el, page);
    await page.close();
    await browser.close();
}

- Waqar Haider