Playwright Screenshot of a Paywalled Page Shows Blurred Text: Troubleshooting

If a Playwright screenshot of a paywalled page shows blurred text, first check whether the authorized account is signed in and whether the protected text is actually visible in the page. A screenshot records the rendered state at capture time; it does not grant access to subscription content. Compare the screenshot with the page’s text or accessibility structure, then check capture timing, options, and browser environment. The title alone does not establish why this page is blurred.

Use the site’s normal login flow and an account permitted to view the content. This guide diagnoses the state your browser is authorized to see; it does not recommend bypassing a paywall or defeating access controls.

Before investigating pixels, confirm the browser has completed the site’s regular login flow. A successful navigation to an article URL does not prove the account can read the article: the site might show a login prompt, subscription notice, or restricted preview instead.

Sign in through the site’s normal login UI with an account authorized to view the content.
Check for a page-specific success signal, such as a signed-in indicator or the expected article heading.
Navigate to the protected page and verify that the intended content is visible in the browser.
Only then take the screenshot.

Playwright supports signing in through the UI and reusing authenticated browser state. Depending on the application, authentication may involve cookies, local storage, IndexedDB, or passkeys; copying cookies alone is not a reliable general solution. Keep any saved authentication state private because it can contain session tokens or other credentials. See the Playwright authentication guide.

2. Compare the screenshot with page text

A screenshot shows pixels. Page text or an accessibility snapshot can help establish whether the text is present in the page structure. Comparing them narrows the diagnosis, but does not by itself identify the site’s cause.

Text is missing from the page structure: check whether login succeeded, the content is permitted for the account, or the page finished loading. The site may be serving a restricted view.
Text exists in the page structure but looks blurred in the screenshot: investigate the rendered appearance, including page styles, overlays, and capture timing. These are hypotheses to inspect, not established causes.
Text is present and legible in both: the issue may be limited to a different capture scope, environment, or run.

Playwright’s MCP guidance distinguishes screenshots for visual inspection from accessibility snapshots for understanding structure and reading text. See Playwright MCP screenshots guidance.

3. Check a minimal, authorized capture

This runnable example assumes you have installed Playwright and that storageState.json was created through the site’s normal login flow for an account authorized to read the page. Replace the example URL and heading with the page you are permitted to access and a condition that indicates its content is ready. If the site requires another supported login method, follow its normal flow instead of assuming this file is sufficient.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ storageState: 'storageState.json' });
const page = await context.newPage();

try {
  await page.goto('https://example.com/member/article', {
    waitUntil: 'domcontentloaded',
  });

  // Replace this with a page-specific signal that should appear for an
  // authorized reader after the article has rendered.
  await page.getByRole('heading', { name: 'Expected article heading' })
    .waitFor({ state: 'visible', timeout: 15000 });

  console.log('Final URL:', page.url());
  console.log('Page title:', await page.title());
  console.log('Visible body text:', (await page.locator('body').innerText()).slice(0, 2000));

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

The heading is an example readiness condition, not a universal selector. Choose a signal that means the content you are authorized to see has rendered. If the expected heading never appears, inspect the final URL and visible page text before changing screenshot options. Do not treat a longer sleep as proof that access was granted.

4. Inspect screenshot scope and options

Once the intended content is visibly available, check whether the capture includes the area where the blur appears. Playwright’s screenshot API supports capture options that change scope or presentation; these options cannot make inaccessible content available.

Option or scope	What to check
Viewport screenshot	Is the text inside the current viewport, or below the fold?
`fullPage: true`	Does the issue also appear when capturing the full scrollable page?
`clip`	Does the selected rectangle include the text, at the intended coordinates?
`scale`	Are you comparing screenshots made with the same scale setting?
`style`	Is a screenshot-only stylesheet changing how page elements appear?

Start with a basic screenshot and no custom screenshot stylesheet or clip. Add options back one at a time if that isolates the difference. See the Playwright Page API for the screenshot options and their behavior.

5. Check timing and rendering

An early capture can show an intermediate page state if the site renders article content asynchronously. Wait for a meaningful, page-specific condition—such as the authorized article heading becoming visible—then capture. Avoid treating a fixed delay as a universal fix: it can make runs slower while still failing to prove the right content loaded.

If the text is structurally present but visually blurred, inspect the rendered page at the time of capture and look for styles or overlays associated with that state. Without the URL, screenshot, or markup, there is no evidence to identify a particular CSS rule, overlay, or site behavior.

6. Compare screenshots under consistent conditions

If the blur appears in a visual regression test, run the baseline and new capture with the same operating system, browser version, settings, hardware conditions, and headless mode where practical. Playwright documents that rendering can vary across these conditions and recommends using the same environment as the baseline. See Playwright visual comparisons.

Keep the capture setup stable before investigating small pixel differences. Record Playwright and browser versions as well as relevant screenshot options so another run can be compared meaningfully.

7. Troubleshooting common symptoms

Symptom	Likely area to inspect	Next step
Login indicator is absent, or the page shows a sign-in prompt	Authentication state	Use the normal login flow and verify a page-specific success signal before navigating to the article.
Article heading or text is absent from page output	Access state or incomplete load	Check the final URL, visible page text, and whether the authorized account can read the content in a regular browser session.
Text is present in page output but blurred in pixels	Rendered styles, overlays, or timing	Inspect the authorized page at capture time and check whether the visual state changes after a meaningful readiness condition.
Only part of the page is captured	Viewport, clip, or full-page setting	Try a basic viewport capture, then compare with `fullPage: true`; verify clip coordinates if using `clip`.
Screenshot differs between local and CI runs	Environment mismatch	Align browser version, OS, settings, and headless mode with the baseline environment.
Saved state works for one run but not another	Expired or incomplete authentication state	Reauthenticate through the site and refresh the private storage state using the supported login flow.

8. Record evidence safely

If the issue needs escalation, capture these details in a bug report:

Final URL and whether the expected signed-in indicator appeared.
Whether the relevant text appears in page or accessibility output.
Screenshot options, including full-page, clip, scale, and any screenshot stylesheet.
Playwright version, browser version, operating system, and headless setting.
A redacted screenshot that does not expose private account data.

Do not attach passwords, session tokens, or unredacted authentication-state files. If the text is present structurally but blurred visually, the next step is to inspect the site’s own rendered styles and overlays; the available evidence does not identify which one is responsible.

Or skip the browser setup

If you need a screenshot of a page your account is authorized to access, ScreenshotNeo offers a one-request screenshot API and an MCP server for AI agents. Its capture flow accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and responses identify the page verdict and billing status in headers. ScreenshotNeo cannot grant access to subscription-only content: use a URL and access method you are authorized to use. See the ScreenshotNeo API documentation.

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

It also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Does Playwright blur paywalled text automatically?

The cited Playwright documentation describes screenshot capture and authentication workflows; it does not establish that Playwright automatically blurs subscription content. Diagnose the page state and rendering evidence before assigning a cause.

Can a screenshot prove that my account has access?

No. It records the visible state. Verify access through the site’s normal login flow and confirm the intended content is visible before capture.

What if the text is readable in the browser but blurred in a visual test?

Compare the page text with the screenshot, check screenshot options and timing, then align the test environment with the baseline. These checks narrow the difference without presuming a specific root cause.