To take a screenshot of only the visible parts of a page in Puppeteer, you can use the page.setViewport method to set the viewport size to the actual size of the visible area and then take a screenshot using the page.screenshot method. Here's an example code snippet:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Set the viewport to the actual size of the visible area
const viewportWidth = await page.evaluate(() => document.documentElement.clientWidth);
const viewportHeight = await page.evaluate(() => document.documentElement.clientHeight);
await page.setViewport({ width: viewportWidth, height: viewportHeight });
// Take a screenshot of the visible area
await page.screenshot({ path: 'screenshot.png' });
await browser.close();
})();
This code will launch a headless browser instance with Puppeteer, navigate to a new page, set the viewport size to the actual size of the visible area, and take a screenshot of only the visible parts of the page. The screenshot will be saved as 'screenshot.png' in the current directory.