Take a Full-Page Screenshot of a React Website After Content Renders

Use Playwright to wait for the React content you need to appear, then call page.screenshot({ path: 'screenshot.png', fullPage: true }). The key is to wait for a page-specific condition—not merely for navigation to finish—because React may render or update content after the initial document load.

Capture the full page after the required React content appears

Install Playwright and configure a browser for your project if you have not already done so. In a Playwright Test file, use the test runner’s expect assertion with a locator for meaningful content on the page:

#	Preview	Product	Price
1		The 138 Best Chrome Extensions	$2.99	Buy on Amazon

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

test('captures the rendered React page', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(
    page.getByRole('heading', { name: 'Expected page heading' })
  ).toBeVisible();

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

Replace the URL and heading with values that identify the content your image must contain. This is an illustrative pattern; it does not assume that every React page has that heading or that the code has been run. Playwright’s screenshot guide documents the screenshot call and the full-page option.

fullPage: true captures the full scrollable page rather than just the visible viewport. A screenshot can also be returned as image bytes if you want to process or store it in code rather than write it directly to a file.

#1 Best Overall

The 138 Best Chrome Extensions

$2.99

Buy on Amazon

Choose a readiness check that matches the page

Navigation lifecycle events tell you about the document’s loading process; they do not prove that your app has completed the particular React work your screenshot depends on. Data fetching, hydration, conditional rendering, and other app updates may happen after navigation.

Wait for required content

Use a locator or assertion tied to the state that matters: for example, a heading, a loaded results panel, or a specific status message. A check that an element is visible is useful only if that element reliably represents the content you need in the image. Playwright’s Page API reference recommends web assertions for assessing readiness in tests and does not prescribe one universal React-specific marker.

Do not treat network idle as a universal finish signal

Playwright defines networkidle as no network connections for at least 500 ms, but marks this wait state as discouraged for testing and advises relying on web assertions to assess readiness instead. Network activity can be quiet before the needed UI appears, or persist because of polling and other background work. Navigation options such as load, domcontentloaded, networkidle, and commit describe navigation milestones, not proof that app-specific data or rendering is complete. See the Page API reference.

Avoid arbitrary delays as a substitute for a condition

A fixed timeout can happen to work in one run and fail when rendering takes longer or happens sooner. Prefer an observable condition for the actual content. There is no single delay or selector that guarantees React hydration, data completion, image loading, or lazy-loaded content is finished on every site.

Save an image or compare against a visual baseline

For a straightforward full-page image, use page.screenshot(). If your goal is a visual regression test, Playwright Test also provides expect(page).toHaveScreenshot(). That assertion waits until two consecutive page screenshots match before comparing with the expectation; it helps establish screenshot stability for comparison, but does not identify whether the intended React content has appeared. Use a readiness assertion for that. See the visual comparisons documentation.

Troubleshoot missing or incomplete content

• The screenshot shows a loading state: Make the readiness assertion target the finished content or a reliable completed-state indicator, rather than relying only on page.goto().
• The assertion passes, but part of the page is absent: Check that the locator represents all content required in the capture. One visible heading may not prove that separate results, widgets, or lower-page sections have rendered.
• Lazy-loaded content is missing below the fold: A full-page screenshot requests the full scrollable page, but that fact alone does not establish that every app’s lazy content has been triggered or loaded. Define and wait for the page-specific state your test requires.
• The test waits indefinitely or times out: Confirm that the locator matches the rendered page and that the expected state can occur for the test data and URL. A navigation wait state cannot fix a selector for content that never appears.
• The screenshot differs between runs: Check whether the page content itself is changing, and distinguish readiness from visual stability. For baseline comparisons, toHaveScreenshot() waits for consecutive matching captures, but it does not decide whether the correct content has loaded.

Or skip the browser setup

ScreenshotNeo takes a website screenshot with one GET request. Its API can return PNG, JPEG, WebP, or PDF; see the ScreenshotNeo API documentation for available parameters and formats.

Quick Recap

Bestseller No. 1

The 138 Best Chrome Extensions

$2.99

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

ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; these steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses report the page verdict and billing status in headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Learn more at ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.

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.