'Using Puppeteer, do a screen capture. the screen capture is done before each element is drawn completely

I do a screen capture using puppeteer, but it comes out that the pixels are different when comparing the pictures because the screen capture is done before each element is drawn.

it has multiple div class "section".

elements = await page.$$('.selector');

for (let count = 0 ; count < elements.length ; count++) {
 
    await elements[count].screenshot({path:path.join(__dirname, name +'${count}.png')});

    await page.waitForTimeout(100);
}

in this case, some elements screenshots are broken. it capture image before drawing element completely.

each elements has sub div class. for example, one specific element has image , description with opacity , #tag , clickable button.

How do i capture each element that is drawn completely??



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source