In Playwright, wait for a page-specific signal that the content you need is visible, then call page.screenshot({ fullPage: true }). A full-page capture covers the page’s scrollable area; the readiness check is what ensures your React content has appeared before the capture.
Capture the page after the required React content appears
Use a locator that represents the content your screenshot must include—for example, a specific heading or result. The selector below is illustrative: replace it with a locator that matches your page and capture goal.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
The 138 Best Chrome Extensions | $2.99 | Buy on Amazon |
As an Amazon Associate I earn from qualifying purchases.
import { test, expect } from '@playwright/test';
test('captures the rendered React page', async ({ page }) => {
await page.goto('https://example.com');
// Replace this with the content that must appear in the screenshot.
await expect(
page.getByRole('heading', { name: 'Expected page heading' })
).toBeVisible();
await page.screenshot({ path: 'screenshot.png', fullPage: true });
});Save this as a Playwright test and run it with your project’s test command, such as npx playwright test. The image is written to screenshot.png. Playwright can also return screenshot image bytes instead of writing directly to a path, which is useful when another step will process or upload the image. See the Playwright screenshot guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Choose a readiness check tied to the image
Navigation finishing and the React app reaching the state you want to capture are different things. The document may load before asynchronous data appears, or the app may update after its initial render. Wait for the actual content or state required in the screenshot, using a locator or web assertion. Playwright does not prescribe one universal React-specific readiness marker.
#1 Best Overall
What full-page capture does—and does not do
fullPage: true asks Playwright to capture the full scrollable page rather than only the current viewport. It does not determine whether the content you expect has rendered; that is the purpose of the preceding readiness check.
Similarly, navigation wait states describe lifecycle events, not whether your app’s data, hydration, or other page-specific work is complete. Playwright’s Page API documents load, domcontentloaded, networkidle, and commit as navigation wait choices. They are not substitutes for checking the particular content the screenshot needs.
Why not wait for networkidle?
networkidle means there have been no network connections for at least 500 ms. Playwright discourages using it as a testing readiness signal and recommends web assertions instead. A page can remain active because of polling or other network activity, while the screenshot’s required content may already be present; conversely, a quiet network does not by itself establish that the right React state is visible. Choose an assertion that reflects the capture requirement. See the Page API reference.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFull-page image or visual regression check?
Use page.screenshot() when the goal is simply to save an image. If you are checking a page against a visual baseline in Playwright Test, use expect(page).toHaveScreenshot(). Playwright’s screenshot assertion waits for two consecutive page screenshots to match before comparing with the expectation. That stability behavior helps with visual comparisons, but it does not establish that the intended React content has appeared; keep the page-specific readiness assertion.
Handle content that appears late
Asynchronous data or conditional UI
Wait for a locator that appears when the necessary data is rendered, such as the result heading, a populated list, or a success message. If the content is not present, the assertion should fail rather than silently save an incomplete screenshot.
Lazy-loaded images or below-the-fold content
A full-page screenshot requests the full scrollable page, but the documentation does not establish a universal guarantee that every app’s lazy-loaded assets will have finished loading. If those assets matter, define and check the relevant image or content state for your app before taking the screenshot. Avoid substituting an arbitrary fixed delay for a condition that can be asserted.
Animations and changing regions
If the page continues to change, identify which state is meaningful for the capture and wait for it explicitly. A stable visual comparison and a correct application state are separate concerns: a page can be visually steady while showing the wrong content.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Troubleshooting
- The screenshot is missing React content: The locator may be checking only the initial shell or a general page element. Wait for the specific data or component the image must contain.
- The test hangs or times out waiting for
networkidle: Ongoing network connections may prevent that state. Use a web assertion for the needed content instead. - The screenshot is only the visible viewport: Confirm the call includes
fullPage: true. - A visual snapshot differs between runs: Check whether the app state is ready and whether the page is still changing.
toHaveScreenshot()waits for two consecutive matching captures, but it cannot decide whether the expected application content has rendered.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server. A single GET request can return a screenshot or PDF. For a straightforward capture, request your target URL like this:
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 API documentation for authentication and request options. Cookie banners, newsletter popups, and chat widgets are removed before capture; those cleanup steps can each be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response headers indicate the page verdict and billing status. An MCP server gives AI agents screenshot tools. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for the free plan.
Frequently Asked Questions
Does fullPage: true wait for React to finish rendering?
No. It controls the captured page area. Use a separate, page-specific assertion to check that the required content is present.
Should I use toHaveScreenshot() instead of page.screenshot()?
Use page.screenshot() to save an image; use toHaveScreenshot() when comparing against a visual expectation in Playwright Test.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
