Log in using the method the site actually supports, wait until its authenticated state is ready, and then call Puppeteer’s page.screenshot(). For HTTP authentication, Puppeteer provides page.authenticate(); for a normal login form or federated sign-in, you must handle that site’s flow yourself. This guide uses authorized access only—check the site’s terms and access controls before automating sign-in or capture.
How the login-and-screenshot workflow works
Authentication and screenshot capture are separate steps. A screenshot call does not log you in: first establish a valid session, then confirm the protected page is ready, and only then capture it. Puppeteer’s screenshot guide documents page.screenshot() for a page and elementHandle.screenshot() for a specific element. Puppeteer: Screenshots
As an Amazon Associate I earn from qualifying purchases.
- Launch Puppeteer and open a page at a viewport suitable for the content.
- Authenticate through HTTP authentication, the site’s own login flow, or an authorized session cookie.
- Wait for navigation or a meaningful authenticated-state signal.
- Capture the viewport, full page, a clipped region, or a single element.
- Check that the saved image contains the intended protected content.
Runnable template for a site login form
This Node.js template shows the flow, but the login selectors and authenticated-state selector are site-specific. Replace them with selectors verified for your authorized test account. Set credentials through environment variables rather than putting real secrets in source code.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesimport puppeteer from 'puppeteer';
const username = process.env.SITE_USERNAME;
const password = process.env.SITE_PASSWORD;
if (!username || !password) {
throw new Error('Set SITE_USERNAME and SITE_PASSWORD first');
}
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 1000 });
await page.goto('https://example.com/login', { waitUntil: 'domcontentloaded' });
// Replace these selectors with the login form used by your site.
await page.locator('input[name="username"]').fill(username);
await page.locator('input[name="password"]').fill(password);
// Use the navigation-safe pattern if submit triggers a document navigation.
await Promise.all([
page.waitForNavigation(),
page.locator('button[type="submit"]').click(),
]);
// Replace with a selector that appears only after successful authentication.
await page.waitForSelector('[data-testid="account-menu"]', { visible: true });
await page.screenshot({ path: 'authenticated-page.png', fullPage: true });
} finally {
await browser.close();
}The example uses Puppeteer’s current locator style; confirm API compatibility with the Puppeteer version installed in your project. The official screenshot and authentication pages surfaced as v25.12.0, while the navigation-wait page surfaced as v25.9.0.
#1 Best Overall
Choose the correct authentication method
HTTP Basic or Digest authentication
For HTTP authentication, call page.authenticate() before navigating to the protected resource:
await page.authenticate({
username: process.env.SITE_USERNAME,
password: process.env.SITE_PASSWORD,
});
await page.goto('https://example.com/protected', { waitUntil: 'domcontentloaded' });
await page.waitForSelector('[data-testid="protected-content"]', { visible: true });
await page.screenshot({ path: 'protected.png', fullPage: true });Page.authenticate() supplies credentials for HTTP authentication; it is not a general-purpose login-form or identity-provider solver. Puppeteer enables request interception internally when this method is used, which its documentation notes may affect performance. Puppeteer: Page.authenticate()
Rank #2
Ordinary form login or federated sign-in
Use the target site’s authorized login flow and fill the required fields or complete its supported sign-in process. The exact steps depend on the site. Multi-factor prompts, CAPTCHA, or other access controls must be handled in accordance with the site’s rules; do not treat a screenshot script as authorization to bypass them.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Previously authorized session cookies
If you already have a valid session cookie obtained through an authorized process, set it in the browser context used by the page before visiting the protected URL. Puppeteer’s Browser.setCookie() sets cookies in the default browser context. The cookie’s domain, path, expiry, and validity must match the destination, and setting an arbitrary cookie does not guarantee an authenticated session. Puppeteer: Browser.setCookie()
Wait for the right readiness signal
When login causes navigation
Start the navigation wait and the click together. Waiting only after clicking can race with a fast navigation:
const [response] = await Promise.all([
page.waitForNavigation(),
page.click('button[type="submit"]'),
]);
await page.waitForSelector('[data-testid="account-menu"]', { visible: true });The navigation response may be null for some navigation types, so the authenticated-state selector is often a more useful final check than relying on the response alone. Puppeteer: Frame.waitForNavigation()
When a single-page app does not navigate
Some sign-ins update the current page asynchronously. In that case, wait for an element that reliably indicates success, such as the account control or protected content itself:
await page.click('button[type="submit"]');
await page.waitForSelector('[data-testid="protected-content"]', { visible: true });
await page.screenshot({ path: 'authenticated-page.png' });waitForSelector() can wait for an element to appear. Choose a signal that distinguishes the authenticated page from the login screen; a generic page load or a button click alone does not prove login succeeded.
Best Value
- Used Book in Good Condition
Choose what to capture and how to save it
| Need | Option or method | What it does |
|---|---|---|
| Current viewport | page.screenshot({ path: 'page.png' }) |
Captures the visible page area by default; PNG is the documented default. |
| Entire page | page.screenshot({ path: 'page.png', fullPage: true }) |
Captures the full page rather than only the viewport. |
| Specific rectangle | page.screenshot({ path: 'region.png', clip: { x, y, width, height } }) |
Captures a defined region; provide coordinates and dimensions for the desired area. |
| One element | await elementHandle.screenshot({ path: 'element.png' }) |
Captures the selected element; Puppeteer’s guide notes it scrolls the element into view if needed. |
| Different format | type: 'jpeg' or type: 'webp' |
Selects an image type; quality is relevant to JPEG and WebP. |
| Transparent background | omitBackground: true |
Omits the default background where transparency is supported. |
The screenshot options also document path, quality, and clip. With no path, page.screenshot() returns image data; when a path is supplied, the extension is used to infer the image type unless an explicit type is given. Puppeteer: ScreenshotOptions
Troubleshoot a missing or incorrect screenshot
- The screenshot shows the login page: the credentials may be wrong, the sign-in may not have completed, or the success condition may be too weak. Wait for an authenticated-only selector and inspect the page before capturing.
- The script times out waiting for navigation: login may complete without a document navigation. Wait for the protected-content or account selector instead.
- The capture is blank or incomplete: capture may have started before the protected content rendered. Wait for the relevant visible element rather than only waiting for initial document loading.
- Cookie authentication is rejected: check that the cookie belongs to the target domain and path, has not expired, and is set in the context used by the page. A cookie can be invalidated or insufficient for the site’s session.
- HTTP authentication appears slow:
page.authenticate()uses request interception internally; Puppeteer documents that this may affect performance. - The whole page is not included: specify
fullPage: true, or useclipor an element screenshot for a deliberately limited region.
Or skip the browser setup
ScreenshotNeo can return a screenshot or PDF from one GET request. Its cleanup options can accept cookie/consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides screenshot tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/protected -o shot.webpSee the ScreenshotNeo API documentation for authentication and capture options. This API example does not sign in to your protected account; use it only for pages the API can access under their existing access rules. ScreenshotNeo is an alternative when its capture and cleanup workflow fits the page. Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Outdated 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 matchPC 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 & 11Frequently Asked Questions
Can Puppeteer take a screenshot after a login completes without changing the URL?
Yes. Wait for a site-specific authenticated-state selector to appear, then call page.screenshot().
Can page.authenticate() fill in a website’s login form?
No. It supplies credentials for HTTP authentication, not ordinary login forms or federated sign-in.
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.
