Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversHalloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PC×
FREEDOM251

Freedom251 › Blog › authentication

How to Take a Full-Page Screenshot of a Password-Protected Page with Playwright

By Freedom251 Team · · 6 min read

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

Log in through the site’s normal flow, wait for an authenticated signal, then capture the protected page with page.screenshot({ path: 'page.png', fullPage: true }). If you need to reuse the login in another run, save the browser context’s storage state and load it into the capture context. Treat that saved file like a password: it may contain credentials capable of accessing the account.

Capture a protected page in the same authenticated session

If you have already logged in and the protected page is open in the same Playwright browser context, you can take the screenshot directly. Use fullPage: true to capture the full scrollable page rather than only the visible viewport.

As an Amazon Associate I earn from qualifying purchases.

await page.goto('https://example.com/protected');
await page.screenshot({ path: 'page.png', fullPage: true });

In a real workflow, wait for a page-specific ready condition before taking the screenshot. A successful navigation alone does not prove that protected content has loaded, and a full-page capture does not guarantee that deferred content has rendered. The Playwright Page API documents the screenshot option.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

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

Log in and reuse the authenticated state

For a repeatable capture, authenticate once using the site’s supported login flow, verify that login completed, save the context’s state, and load it when creating the context for the protected page. Replace the example URL, selectors, and success signal with those used by your site. Supply credentials securely as environment variables rather than putting real credentials in checked-in source.

import { chromium, expect } from '@playwright/test';

const authFile = 'playwright/.auth/user.json';
const browser = await chromium.launch();

// Authenticate in a browser context.
const loginContext = await browser.newContext();
const loginPage = await loginContext.newPage();

await loginPage.goto('https://example.com/login');
await loginPage.getByLabel('Username').fill(process.env.SITE_USERNAME!);
await loginPage.getByLabel('Password').fill(process.env.SITE_PASSWORD!);
await loginPage.getByRole('button', { name: /sign in/i }).click();

// Choose a signal that means this application is actually authenticated.
await expect(loginPage.getByRole('button', { name: /account|profile/i })).toBeVisible();
await loginContext.storageState({ path: authFile });
await loginContext.close();

// Restore that state in the context used for capture.
const captureContext = await browser.newContext({ storageState: authFile });
const page = await captureContext.newPage();
await page.goto('https://example.com/protected');
await expect(page.getByRole('main')).toBeVisible();
await page.screenshot({ path: 'page.png', fullPage: true });

await captureContext.close();
await browser.close();

The example uses expect from Playwright Test; install and configure that package if using this exact example. In other setups, replace the assertion with an equivalent wait for the application’s authenticated UI or final URL. A button click finishing is not, by itself, evidence that redirects and cookie setup are complete. See Playwright’s authentication guide for its recommended storage-state workflow.

Keep the state file out of source control

Saved state may include cookies or headers that can impersonate the account. Store it in a private location, restrict access, and add the authentication directory to .gitignore. Delete or regenerate it when it expires or is no longer needed. Do not print its contents or authentication tokens in logs.

For Playwright Test suites, the documented setup-project pattern can authenticate once and share saved state when tests do not conflict over server-side data. If parallel tests mutate shared account state, use separate accounts per worker rather than assuming one shared login is safe. See the Playwright authentication guide.

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

Choose the right authentication state mechanism

  • Cookies and local storage: These are included in normal storage-state workflows and are sufficient for many sites. Browser context state is described in the BrowserContext API.
  • IndexedDB: The BrowserContext API documents optional IndexedDB snapshotting, added in Playwright v1.51. Enable it only if the application relies on data stored there.
  • WebAuthn credentials: The API documents optional WebAuthn credential snapshotting, added in v1.61. Use it only when the application’s authentication requires it.
  • OPFS: Optional OPFS snapshotting is documented as added in v1.63; the API notes it is not supported in ephemeral WebKit contexts.
  • Session storage: Playwright’s normal storage-state mechanism does not persist session storage. If the application requires it, the authentication guide describes reading it from the page and using context.addInitScript to restore keys before the application loads on the matching hostname. Adapt this carefully to the site and keep tokens out of logs.

Applications using MFA, SSO, CAPTCHA, short-lived tokens, device binding, or server-side session invalidation may require a site-specific supported flow or fresh state. The Playwright mechanisms above do not guarantee that any particular site will accept a reused session.

Make the full-page capture useful

fullPage: true captures the full scrollable page. It does not establish a universal way to make every lazy image, infinite-scroll feed, or application widget render. If content appears only after scrolling, loading, or another interaction, add site-specific steps before capture and inspect the resulting image.

  • Wait for a meaningful page element or application-ready signal, not just a fixed delay, when possible.
  • For lazy content, scroll or otherwise trigger loading as the site requires, then wait for the relevant images or elements.
  • For an unusually long page, confirm that the captured image contains all expected sections and that sticky or dynamic elements appear as intended.

Use page.screenshot to save an image artifact. If you are writing a Playwright Test visual regression test instead, toHaveScreenshot is the assertion API; its documented behavior includes waiting for two consecutive screenshots to match before comparing with a baseline. It is specific to the Playwright Test runner. See the PageAssertions API.

Troubleshooting

  • The capture shows a login page: The login may not have completed, the saved state may have expired, or the capture context may not be using the expected state file. Wait for a post-login URL or authenticated UI element before saving state, then verify the protected page’s authenticated signal after navigation.
  • Login succeeds but the next run is unauthenticated: Check whether the site depends on session storage, IndexedDB, or another storage mechanism not covered by the state you saved. Also check for short-lived sessions or server-side invalidation; a fresh supported login may be necessary.
  • The screenshot is incomplete or missing images: The target may load content only after scrolling or another trigger. Add the site’s required interactions and readiness checks, then inspect the image rather than assuming full-page mode forces all deferred content to load.
  • The auth file is missing or unreadable: Ensure the parent directory exists and the process has permission to write and read the file. Keep the file private; do not solve access problems by committing it to the repository.
  • The account behaves unpredictably in parallel tests: Tests may be changing shared server-side state. Use distinct accounts per worker where tests mutate that state, following the Playwright authentication guidance.
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 provides a website screenshot API and MCP server. A single request can return an image or PDF, but a protected page still needs authentication that the service can legitimately use; do not send account credentials or session state unless your security and access controls permit it.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/protected -o shot.webp

See the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie and Authorization parameters, among other capture settings. It removes cookie/consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Details and signup are at ScreenshotNeo.

Sign up for 1,000 free screenshots a month, with no card required.

Frequently Asked Questions

Does fullPage: true automatically load every lazy image?

No. It captures the scrollable page; content deferred until scrolling or another site-specific trigger may still need to be loaded before capture.

Can Playwright storage state persist session storage?

Not through the normal storage-state mechanism. Session storage requires a separate, carefully scoped restoration approach if the application depends on it.

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.

authenticationbrowser automationPlaywrightscreenshotsWeb development

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.