What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To screenshot a page that requires login with Puppeteer, first authenticate using the site’s actual method, wait for a reliable signal that the protected page is ready, then call page.screenshot(). page.authenticate() is for HTTP authentication—not ordinary login forms. The example below is a template: replace the login steps and success selector with those for a test account you are authorized to use.
Capture a page after logging in
This Node.js template launches Chromium, opens a login page, and waits for an authenticated-state element before saving a full-page PNG. The selector and form steps are site-specific; do not put real credentials in source control.
import puppeteer from 'puppeteer';
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 and values with the authorized test site's form.
await page.type('input[name="username"]', process.env.TEST_USERNAME);
await page.type('input[name="password"]', process.env.TEST_PASSWORD);
// If submitting causes a navigation, start the wait before clicking.
await Promise.all([
page.waitForNavigation(),
page.click('button[type="submit"]'),
]);
// Replace this with a visible element that only appears when signed in.
await page.waitForSelector('[data-testid="account-menu"]', {
visible: true,
});
await page.screenshot({ path: 'authenticated-page.png', fullPage: true });
} finally {
await browser.close();
}Install Puppeteer in your project with npm install puppeteer. Set TEST_USERNAME and TEST_PASSWORD in the environment where the script runs. The example assumes a form that submits to a navigation; adapt it to the target site rather than treating these field names as universal.
Choose the right authentication method
HTTP authentication
For a site protected by HTTP Basic or Digest authentication, Puppeteer provides page.authenticate(). Call it before navigating to the protected URL:
#1 Best Overall
await page.authenticate({
username: process.env.TEST_USERNAME,
password: process.env.TEST_PASSWORD,
});
await page.goto('https://example.com/protected', {
waitUntil: 'domcontentloaded',
});This API supplies credentials for HTTP authentication; it does not fill in a website’s username and password form or complete a federated sign-in flow. Puppeteer enables request interception internally for this feature, which may affect performance. See the Page.authenticate() API documentation.
Form-based, federated, and single-page application sign-in
For an ordinary login form, navigate to the login page, fill the site’s own controls, and submit. Federated sign-in may involve redirects, multiple steps, or additional verification; implement only a flow the site permits you to automate. If authentication completes inside a single-page app without navigating, wait for a site-specific success signal—such as the account menu or a protected-content selector—instead of waiting for navigation.
Reuse an authorized session cookie
If your test setup has already obtained a valid session cookie through an authorized sign-in, you can set it in the browser context before visiting the protected page. Cookie domain, path, expiry, and other attributes must match the target site, and setting a cookie does not by itself guarantee the session is valid.
Rank #2
await page.browserContext().setCookie({
name: 'session',
value: process.env.TEST_SESSION_COOKIE,
domain: 'example.com',
path: '/',
secure: true,
httpOnly: true,
});
await page.goto('https://example.com/account', {
waitUntil: 'domcontentloaded',
});Use the context associated with the page you will capture. Puppeteer documents Browser.setCookie() for setting cookies in the default browser context; see the Browser.setCookie() API documentation.
Wait for the correct ready state
A completed navigation is not always proof that login succeeded: it may land on an error, challenge, or login page. Conversely, successful authentication may not navigate at all. Wait for the signal that represents the actual outcome you need, then verify it before taking the screenshot.
- Navigation after submit: start
page.waitForNavigation()and the click or submit together withPromise.all(). Starting the wait afterward can miss a fast navigation. - No navigation: use
page.waitForSelector()for an element that appears only in the authenticated state. - Slow protected content: wait for a meaningful content selector, not just the account control, if the screenshot must include data that loads after sign-in.
- Uncertain result: inspect the final URL and visible page state before capture; do not assume the screenshot proves a successful login.
Puppeteer documents the concurrent navigation-wait pattern in its Frame.waitForNavigation() API. Selector waits are documented in the Page.waitForSelector() API.
Choose what the screenshot contains
By default, page.screenshot() captures the current viewport as a PNG. Set the capture scope explicitly so the output matches your use case.
fullPage: truecaptures the full page rather than only the viewport.clipcaptures a specified rectangular region.pathsaves the image to a file; without it, the method returns image data. If you do not specifytype, the file extension can determine the image type.typeselects the output format. JPEG and WebP support aqualitysetting; PNG is the default.omitBackground: trueomits the default background where transparency is supported.
To capture a particular element instead of the page, locate it and call ElementHandle.screenshot(). Puppeteer scrolls the element into view if needed:
const panel = await page.waitForSelector('[data-testid="account-panel"]', {
visible: true,
});
await panel.screenshot({ path: 'account-panel.png' });See Puppeteer’s Screenshots guide and ScreenshotOptions interface for the current options. The screenshot and authentication API pages currently identify Puppeteer v25.12.0; the navigation-wait page identifies v25.9.0. Check the API documentation for the version you have installed because signatures and behavior can change.
Or skip the browser setup
If you do not need a custom Puppeteer login flow, ScreenshotNeo is a screenshot API and MCP server. A URL-only call returns an image or PDF; it does not replace a site-specific authenticated browser session. For pages accessible without a login, use:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo documentation for API options. Before capture, it accepts cookie/consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for 1,000 free screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting
The screenshot shows the login page
The login may have failed, the submit may not have been handled as expected, or the readiness check may be too weak. Confirm the final URL and page state, check that the form selectors match the site, and wait for a protected-content selector rather than capturing immediately after the click.
Best Value
- Used Book in Good Condition
The script times out waiting for navigation
The site may authenticate asynchronously without a document navigation. Remove the navigation wait for that flow and wait for a visible success or protected-content selector. For a navigation-triggering action, ensure the wait is started concurrently with the action.
The cookie is ignored or the session is rejected
Check that the cookie is current and that its domain, path, security settings, and browser context match the target page. A cookie from an expired or unrelated session will not establish authenticated access.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsThe screenshot is cropped or unexpectedly large
Check whether you need the default viewport capture or fullPage: true. For a specific region use clip; for one control or panel use ElementHandle.screenshot(). Set the viewport before navigating if responsive layout affects the content.
HTTP authentication is slow
page.authenticate() enables request interception internally, which can affect performance. Use it only for HTTP authentication; do not use it as a substitute for automating a normal site login.
Security and operating considerations
- Automate only accounts and pages you are authorized to access, and follow the target service’s terms and access controls.
- Keep passwords, session cookies, and API credentials out of committed code and screenshot artifacts. Restrict access to any saved images that may contain private account information.
- Use an explicit success condition and an appropriate wait rather than a fixed delay wherever possible. A delay can be too short on a slow run and waste time on a fast one.
- Full-page captures can produce large files and may include more private information than a viewport or element capture. Choose the narrowest scope that meets the need.
Frequently Asked Questions
Does page.authenticate() log in to a website’s login form?
No. It supplies credentials for HTTP authentication. A form-based login needs the site’s own form flow or another authorized session method.
Can Puppeteer capture an authenticated element without saving the whole page?
Yes. Use ElementHandle.screenshot() on the element you want to capture.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →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.
