PRICING
PRODUCT
SOLUTIONS
by use cases
AI Lead ManagementInvoicingSocial MediaProject ManagementData Managementby Industry
learn more
BlogTemplatesVideosYoutubeRESOURCES
COMMUNITIES AND SOCIAL MEDIA
PARTNERS
Puppeteer is a Node.js library that simplifies browser automation, making tasks like taking screenshots quick and efficient. Whether you need full-page captures, specific element snapshots, or optimized images, Puppeteer offers flexible options with minimal code. Here's what you can do with Puppeteer:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
Whether you're a developer testing websites or documenting errors, Puppeteer streamlines the process with powerful tools and simple commands.
Latenode offers direct integration with the Puppeteer library without needing to install anything on your system. Simply choose a node from the integration node library, add it to your automation scenario, add a script for screenshotting, and link it to other nodes. Here are a few showcases. Take a look at them and choose what suits your needs!
This automation tool is designed to analyze and summarize web content by capturing and processing screenshots of specified websites. By using a headless browser and integrating with AI, it allows you to extract key insights from web pages. Great for monitoring website changes, analyzing competitors, or gathering visual data for reports.
Clone this template, customize it to your needs, and automate website monitoring!
This automated scenario is designed to collect and process web search results. Use headless browser and AI-assisted Javascript code to gather information from search engines, capture screenshots for reference, and save the data for further analysis. This tool is ideal for market research or any task requiring automated data collection from the web.
Clone this ready-made template to scrape any product data from Ebay!
This tool analyzes online reviews for a specified company, providing actionable insights through AI-driven analysis. Headless browser is used to navigate, screenshot, and collect reviews, while DeepSeek AI helps for detailed analysis. Great for monitoring brand reputation, improving customer service, and making data-driven decisions.
Clone this template to collect reviews, analyze them and get detailed insights on any brand!
Follow these steps to set up Puppeteer and start capturing web content. A proper setup ensures smooth performance for various screenshot needs, whether it's full-page, specific elements, or size-optimized captures.
Once you add the Headless Browser node, create a new browser instance with the following code:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1280, height: 720 }
});
const page = await browser.newPage();
await page.goto('https://example.com');
})();
This sets up your environment, allowing you to capture screenshots with precision.
To fine-tune your screenshots, adjust viewport settings. Here’s a breakdown of key parameters:
Parameter | Default Value | Recommended Setting | Purpose |
---|---|---|---|
Width | 800px | 1280px | Matches common desktop resolution |
Height | 600px | 720px | Provides a standard 16:9 aspect ratio |
Scale Factor | 1 | 1 | Maintains the original size |
Mobile Mode | false | false | Ensures desktop rendering |
Use the following code to configure these parameters:
await page.setViewport({
width: 1280,
height: 720,
deviceScaleFactor: 1,
isMobile: false
});
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36');
"In Puppeteer, viewport manipulation is particularly significant for tasks such as web scraping, testing web applications across different devices, and generating screenshots or PDFs of web pages." - Webshare
For dynamic content, set a timeout to account for load delays:
page.setDefaultTimeout(30000); // 30 seconds timeout
With these configurations, you're ready to capture high-quality screenshots tailored to your needs.
Learn how to take full-page screenshots with Puppeteer by using specific settings, scrolling methods, and troubleshooting techniques.
To capture an entire webpage, including content outside the visible area, use Puppeteer's fullPage option:
await page.screenshot({
path: 'complete-page.png',
fullPage: true
});
Before capturing, ensure the page has fully loaded and dynamic content has finished rendering:
await page.waitForNetworkIdle();
await page.waitForTimeout(2000);
If dynamic content is still missing in the screenshot, consider using scrolling techniques as explained below.
For pages that require scrolling to load all content, you can automate the scrolling process:
async function captureFullPage(page) {
// Scroll through the page and wait for content to load
await page.evaluate(async () => {
return await new Promise((resolve) => {
const timer = setInterval(() => {
window.scrollBy(0, window.innerHeight);
if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
// Scroll back to the top, then take the screenshot
await page.evaluate(() => window.scrollTo(0, 0));
return await page.screenshot({ fullPage: true });
}
"Taking screenshots by sections is the best solution we might have today for taking the complete page screenshots."
This method ensures all sections of the page are loaded and included in the capture.
Here are some common issues you might face and their solutions:
Issue | Solution | Implementation |
---|---|---|
Viewport Units | Set a fixed viewport height | await page.setViewport({ height: 900 }); |
Lazy Loading | Use progressive scrolling | Use the captureFullPage function |
Complex Layouts | Capture in sections | Take multiple screenshots and merge them |
For pages with infinite scroll or heavy dynamic content, add a scroll limit to prevent endless looping:
const maxScrolls = 10;
let scrollCount = 0;
while (scrollCount < maxScrolls) {
const previousHeight = await page.evaluate('document.body.scrollHeight');
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
await page.waitForTimeout(1000);
const newHeight = await page.evaluate('document.body.scrollHeight');
if (newHeight === previousHeight) break;
scrollCount++;
}
"Puppeteer is currently the best tool in the ecosystem for running a headless browser... However, Puppeteer doesn't perform perfectly when it comes to taking screenshots."
For particularly tricky layouts where the fullPage option doesn't work as expected, manually set dimensions and use them as clipping parameters:
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.scrollHeight
};
});
await page.screenshot({
path: 'precise-capture.png',
clip: {
x: 0,
y: 0,
width: dimensions.width,
height: dimensions.height
}
});
With these techniques, you'll be able to handle full-page screenshots effectively. Up next: capturing specific elements and fine-tuning size and quality settings.
Puppeteer makes it easy to focus on specific elements, building on its ability to capture full-page screenshots.
To target elements accurately, use CSS selectors like IDs, classes, or combinations:
// Target by ID (most reliable)
const submitButton = await page.$('#submit-button');
// Use specific class combinations
const productCard = await page.$('.product-card.featured');
// Locate elements within a container
const menuItem = await page.$('.navigation-menu .dropdown-item.active');
After identifying an element, use Puppeteer's screenshot tools to capture it:
const element = await page.$('div.product-data');
await element.screenshot({
path: 'element-screenshot.png',
type: 'png'
});
For more advanced selection, try the page.locator()
method:
const locator = page.locator('div.product-data');
await locator.screenshot({
path: 'element-locator.png',
quality: 90
});
"Element screenshots are about being precise and efficient. Less fluff, more focus." - Laura and Heidi, SCRNIFY
This approach works well for automated testing and reporting, complementing full-page captures. Just make sure the element is fully loaded before taking the screenshot.
Dynamic elements often require extra steps to ensure they’re ready for interaction:
// Wait for the element to become visible
const element = await page.waitForSelector('.dynamic-element', {
visible: true,
timeout: 5000
});
// Wait for API data to load
await page.waitForResponse(
response => response.url().includes('/api/data')
);
// Capture the screenshot
await element.screenshot({ path: 'dynamic-element.png' });
For elements with specific conditions, create custom wait functions:
await page.waitForFunction(() => {
const element = document.querySelector('.chart-container');
return element && element.getBoundingClientRect().height > 0;
});
Here’s a real-world example using TradingView's cryptocurrency charts:
await page.goto("https://www.tradingview.com/markets/cryptocurrencies/");
const chartElement = await page.waitForSelector(".tv-lightweight-charts", {
visible: true
});
await chartElement.screenshot({ path: 'crypto-graph.png' });
"Waiting for a specific element is pivotal to the automation process, preventing premature interactions." - ScrapeOps
When working with dynamic content, combine different waiting strategies for the best results:
Scenario | Waiting Strategy | Implementation |
---|---|---|
Static Elements | Basic selector | page.$() |
API-dependent | Response wait | waitForResponse() |
Rendered Charts | Custom function | waitForFunction() |
Visible UI | Visibility check | waitForSelector() with visible: true |
Improving screenshot size and quality can enhance both performance and storage efficiency. Here’s how to do it effectively.
The format you choose for your screenshots impacts both the quality and file size. Here's a quick comparison:
Format | Best Use Case | Advantages | Disadvantages |
---|---|---|---|
WebP | Modern web apps | Smaller files (25-34% smaller), supports transparency | Limited support in older browsers |
JPEG | Photos, detailed screenshots | Small file sizes, widely supported | No transparency |
PNG | UI elements, logos | Lossless quality, supports transparency | Larger file sizes |
For example, you can use the following code to save screenshots in WebP or JPEG formats:
// WebP format
await page.screenshot({
path: 'screenshot.webp',
type: 'webp',
quality: 80
});
// JPEG format
await page.screenshot({
path: 'screenshot.jpg',
type: 'jpeg',
quality: 75
});
The quality settings can help balance clarity and file size. Use higher quality for detailed UI elements and lower quality for general captures:
// High quality for UI elements
await page.screenshot({
path: 'ui-element.jpg',
quality: 90,
type: 'jpeg'
});
// Medium quality for general captures
await page.screenshot({
path: 'full-page.jpg',
quality: 75,
type: 'jpeg'
});
"WebP provides file sizes that are 25-35% smaller than JPEG for the same level of quality." - Google Developers
To further minimize file size without losing clarity, you can clip screenshots or optimize them for web delivery:
// Clip to specific dimensions
await page.screenshot({
path: 'clipped.jpg',
clip: {
x: 0,
y: 0,
width: 1280,
height: 720
}
});
// Optimize for web delivery
await page.screenshot({
path: 'optimized.webp',
type: 'webp',
quality: 75,
omitBackground: true
});
For instance, GitLab reported an 80% reduction in PNG file sizes through optimization workflows.
"The JPG version is much smaller. On the Puppeteer side of things, there is a negligible difference in speed to generate a JPG vs a PNG." - Jon Yongfook, Founder of Bannerbear
Different types of content call for different formats and settings. Here's a quick guide:
Screenshot Type | Best Format | Quality Setting | File Size Reduction |
---|---|---|---|
Full-page | WebP | 75-80% | 25-34% smaller than JPEG |
UI Elements | PNG | Lossless | Prioritize quality |
Photo-heavy Content | JPEG | 70-80% | 70-90% smaller than uncompressed |
Puppeteer simplifies web automation and testing with its screenshot features. It allows you to capture entire pages or specific elements while giving you control over image quality and format. Plus, faster encoding options can help save processing time.
To get the best results, set your viewport dimensions to match the resolution you need and use the waitForSelector()
method to ensure all content loads fully. If you're using JPEG format, tweak the quality settings to balance file size and clarity.
Here’s how to start using Puppeteer for screenshots:
"Puppeteer is a powerful tool for web scraping and test automation, offering a high degree of flexibility and control over the screenshot-taking process".
For even smoother integration, consider using platforms like Latenode. Its visual workflow builder allows you to set up advanced screenshot automation without needing extensive coding skills.