Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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

Log in with the method the site uses, wait for a reliable marker showing the target content is ready, then capture it with await page.screenshot({ path: 'page.png', fullPage: true }). Puppeteer’s current retrieved documentation is for version 25.12.0; the examples below are adaptable patterns, not scripts tested against a particular site.

Capture a logged-in page in three steps

  1. Establish the authenticated browser state. Use Puppeteer’s HTTP-authentication method for HTTP authentication; for an application login form, interact with the site’s sign-in page.
  2. Navigate to the protected page and verify readiness. Wait for a stable, site-specific marker that appears when the intended content is available.
  3. Capture the full document. Set fullPage: true in page.screenshot() and provide a path to save the image.

Here is a runnable ESM example for a page where the browser is already authenticated or the target does not require a form login. Replace the URL and selector with values for your site:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
try {
  const page = await browser.newPage();

  // For HTTP authentication only; see the separate example below.
  await page.goto('https://example.com/account/report', {
    waitUntil: 'networkidle2',
  });

  // Replace with a stable marker for the content you need.
  await page.locator('[data-testid="report-content"]').wait();

  await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
  await browser.close();
}

Install Puppeteer in your project with npm install puppeteer. This example uses top-level import; run it in an ES module context. The selector is illustrative, not universal. Puppeteer’s guide demonstrates Page.screenshot() and navigation with waitUntil: 'networkidle2'; its API reference defines the fullPage option. Puppeteer screenshot guide · ScreenshotOptions API reference

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Choose the right authentication flow

HTTP authentication

For a resource protected by HTTP authentication, call page.authenticate() before navigating to it. This is not a general-purpose way to sign into a website’s login form.

await page.authenticate({
  username: process.env.USERNAME,
  password: process.env.PASSWORD,
});

await page.goto('https://example.com/account/report', {
  waitUntil: 'networkidle2',
});

Set the environment variables securely in your runtime rather than putting real credentials in source code. Puppeteer enables request interception internally to implement page.authenticate(), which can affect performance. Puppeteer Page.authenticate() API reference

Application login form

For a typical website login, go to its sign-in page, use the site’s own form controls, submit, and confirm a marker that indicates the authenticated state. Then open the protected page and wait for a marker for the content you intend to capture. The exact URL, selectors, and success signal depend on the application; there is no universal login selector.

Rank #2
Sale
HTML and CSS: Design and Build Websites
  • HTML CSS Design and Build Web Sites
  • Comes with secure packaging
  • It can be a gift option

Puppeteer locators can wait for elements and action preconditions, but the page-specific controls still need to be identified for your site. Puppeteer page interactions guide · Puppeteer Locator API reference

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Wait for the content, not just the navigation

waitUntil: 'networkidle2' is a navigation lifecycle condition, not proof that the browser is logged in or that the page’s intended application content has rendered. Likewise, page.waitForNetworkIdle() waits for network activity to settle for at least its configured idle period; it cannot tell whether the correct account or report is displayed. Pair a network-idle wait, if useful for the site, with a content-specific marker. Puppeteer Page.waitForNetworkIdle() API reference

A marker might be a report container, a page heading, or a user-specific element that only appears after authentication. Choose one that signals the actual content you need, rather than a generic navigation bar that could also appear on a sign-in or error page.

Pages with lazy-loaded content

A full-page screenshot setting does not guarantee that content fetched only after scrolling has loaded. Before capture, check that the needed sections are present. If the site loads them on scroll, scroll through the relevant sections and wait for their own readiness markers before taking the screenshot. Lazy-loading behavior varies by site, so verify the resulting image rather than assuming that a full-page capture triggered every request.

Rank #4
Sale
Web Design with HTML, CSS, JavaScript and jQuery Set
  • 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

Save the full-page image

fullPage is an optional screenshot setting and defaults to false. Set it to true to capture the full page rather than only the current viewport. Supplying path writes the screenshot to a file; without a path, the screenshot API can return image data instead. Puppeteer ScreenshotOptions API reference

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Troubleshooting

  • The result is a sign-in page. The login did not establish the expected authenticated state, or the session was not carried to the target. Verify a logged-in marker after submitting the form, then navigate to the protected URL.
  • The screenshot is blank or missing the report. The selector may identify the wrong element, or the page may still be rendering. Wait for a marker belonging to the actual report and inspect whether the site displays an error or access-denied state.
  • The image stops at the viewport. Confirm the screenshot call includes fullPage: true.
  • Lower sections or images are absent. Check for lazy-loaded content. Scroll through the needed area and wait for those sections or images to appear before capturing.
  • HTTP authentication does not work for a web login form. page.authenticate() is for HTTP authentication. Use the application’s sign-in page and controls for a form-based login.
  • Navigation or capture takes longer than expected. Some pages maintain ongoing network activity, so waiting for network idle alone may not be a useful readiness test. Use an application-specific marker; note that HTTP authentication also turns on request interception internally.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

ScreenshotNeo can return a screenshot or PDF with one GET request. Cookie and consent banners are accepted as a visitor and more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. It also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo and its API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/account/report -o shot.webp

Use an API key in place of YOUR_API_KEY. The request URL is the page to capture. Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.

Frequently Asked Questions

Does fullPage: true log me in?

No. Authentication must be established separately, either with HTTP authentication or through the website’s own login flow.

Can I use the screenshot without saving a file?

Yes. Puppeteer’s screenshot API can return image data when you omit the path option.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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.