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??