puppeteer whete or gray screenshot

Question

I am trying to take screenshots of all the table elements in a web page. Now for someweb pages it is working perfectly fine, I am able to take take pictures. But some websites are not working. I am able to take screenshots but they are mostly white or gray here is the code iam using.

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);

I have tried different screen sizes and other things like waiting for everything to load. When i see in the browser, i can clearly see the page loads and after it loads, the screenshots are taken but the images are either just white screens same size as tabel area.

NOTE: Just a note that i also downloaded some of the pages offline and even that is not working.

user_5279836 · Answer

My problem was that i was setting my viewport after goto(), I changed the code to this;

`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();
}

puppeteer whete or gray screenshot

1 Answers