The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Puppeteer’s Page API is the per-tab interface for navigating a rendered page, interacting with elements, running JavaScript in the page, waiting for events, and capturing screenshots or PDFs. For a full-page image, use page.screenshot({ fullPage: true }); for a PDF, use page.pdf() and select screen media first if you want screen rather than print styles.
What the Puppeteer Page API does
A Puppeteer Page represents a browser tab (or an extension background page). It is the working surface for loading a URL, finding and operating on elements, evaluating code in the page’s JavaScript context, waiting for navigation or other conditions, and producing screenshots and PDFs. The current official Page reference identifies its documented version as Puppeteer 25.12.0; check the documentation for the version installed in your project when behavior is version-sensitive. Puppeteer Page API reference
As an Amazon Associate I earn from qualifying purchases.
Launch a browser, open a page, and take a screenshot
This complete Node.js example launches Chromium through Puppeteer, navigates to a URL, saves a full-page PNG, then closes the browser even if an operation fails.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
const response = await page.goto('https://example.com', {
waitUntil: 'networkidle2',
});
if (response && !response.ok()) {
throw new Error(`Navigation returned HTTP ${response.status()}`);
}
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();The official Page class example follows the same basic launch, create-page, navigate, capture, close sequence. Page reference The networkidle2 wait condition is an example choice, not a guarantee that every application has finished rendering: pages with ongoing requests or delayed client-side content may need a more specific wait.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Control elements with Locators and page evaluation
Prefer a Locator for user-like actions
Puppeteer recommends Locators for selecting an element and interacting with it. A Locator waits for the target to exist and be in the appropriate state for the requested action, reducing races compared with immediately issuing a raw click against a page that has not settled. Page interactions guide
const button = page.locator('button[type="submit"]');
await button.click();When an interaction causes navigation, start waiting for navigation at the same time as the action. Otherwise, a fast navigation can happen before the wait is registered.
const [response] = await Promise.all([
page.waitForNavigation(),
page.click('a.some-link'),
]);The pattern is documented in the Page reference. Page reference
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Rank #2
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Use evaluate for page-context computation
page.evaluate(fn, ...args) runs a function in the page’s JavaScript context. Puppeteer waits for a returned Promise and gives your Node.js code the resolved value. Values passed as arguments should be serializable.
const title = await page.evaluate(() => document.title);
console.log(title);For a reference to a page-side object rather than a serialized value, use page.evaluateHandle(). The result is a handle; dispose of it when it is no longer needed to release the reference.
const bodyHandle = await page.evaluateHandle(() => document.body);
try {
console.log(await bodyHandle.evaluate(body => body.innerText));
} finally {
await bodyHandle.dispose();
}Use selector callbacks when appropriate
page.$eval(selector, callback) runs a callback with the first matching element as its first argument. It throws if the selector matches no element, so check that the element is expected to exist or use a Locator when you need waiting behavior.
Rank #3
const heading = await page.$eval('h1', element => element.textContent);
console.log(heading);Take viewport, full-page, or clipped screenshots
page.screenshot() returns image bytes by default. Provide path to write an image to disk; when you do not specify a type, Puppeteer infers it from the file extension. The default capture is the current viewport.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchawait page.screenshot({ path: 'viewport.png' });
await page.screenshot({ path: 'entire-page.png', fullPage: true });Set fullPage: true to capture beyond the viewport. To capture a specific rectangle, use clip with its position and dimensions.
await page.screenshot({
path: 'region.png',
clip: { x: 40, y: 120, width: 800, height: 500 },
});To receive a base64 string instead of the default image bytes, configure the screenshot encoding as documented. Quality is relevant to lossy image formats, not PNG. Use omitBackground: true when you need to omit the default white background for transparency. Screenshot API · Screenshot options
Generate a PDF with the right CSS media
page.pdf() generates a PDF using print CSS media by default. If the document should look like the screen version, select screen media before generating the PDF.
await page.emulateMediaType('screen');
await page.pdf({ path: 'page.pdf' });Print output can modify colors. To preserve exact colors in print styling, the Puppeteer PDF documentation points to the CSS property -webkit-print-color-adjust. Use it in the page’s styles where color fidelity is required. PDF API
Free tools Windows power users keep installed
One-click scans. No signup required.
Generating a PDF from a rendered HTML page is different from navigating directly to an existing PDF URL. The Page navigation documentation notes that headless shell mode does not support navigation to a PDF document; use a supported browser mode or another method for that workflow. Page reference
Best Value
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
Handle navigation results and HTTP errors
page.goto(url) resolves to the response for the main resource. It can resolve to null for documented cases such as navigating to about:blank or changing only the URL fragment on the same page. Do not assume every successful navigation gives you a response object.
In headless shell, a valid HTTP response such as 404 or 500 does not necessarily make goto() throw. If the HTTP status matters, inspect the returned response with response.status(); also handle a null response where relevant. Page reference · goto API
Troubleshoot common Page API problems
- The click happens before the element is ready: use a Locator, which waits for the element and its action-ready state, rather than clicking immediately after navigation. Interactions guide
- The script hangs waiting for navigation: pair the action and
waitForNavigation()inPromise.all(), and confirm the action really navigates. For single-page-app updates that do not navigate, wait for a page-specific selector or condition instead. Page reference - A 404 or 500 is treated as success: inspect the navigation response status. A valid HTTP error status may not throw from
goto()in headless shell. goto API goto()returns null: account for the documentedabout:blankand same-document fragment navigation cases before accessing response methods. goto API- A PDF URL will not open in headless shell: navigation to an existing PDF is not supported there. This is distinct from calling
page.pdf()to print a rendered page. Page reference - A PDF has print styling instead of the screen appearance: call
page.emulateMediaType('screen')beforepage.pdf(). For print colors, consider-webkit-print-color-adjust. PDF API - Parallel capture seems to stall page creation or closure: the Page reference says creating or closing pages in a BrowserContext waits while a screenshot is underway;
bringToFront()does not wait. Factor that coordination into concurrent screenshot workflows. Page reference
Or skip the browser setup
If you need a screenshot rather than browser automation, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. For example, this saves a WebP screenshot:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for the request options. It can accept cookie banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Create a free ScreenshotNeo account to try 1,000 screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
