ScreenshotNeo
Sign in Get a free key

BlogAI agents

How to Use an MCP Server to Screenshot a Page After JavaScript Loads

Connect Playwright MCP, wait for a page-specific signal, then save a screenshot of the rendered page. Includes setup, capture options, troubleshooting, and a hosted alternative.

By the ScreenshotNeo team4 October 20267 min read

To screenshot a page after JavaScript loads, use an MCP browser server to navigate to the URL, wait for a page-specific readiness signal, and then call its screenshot tool. With Playwright MCP, the usual sequence is browser_navigate, browser_wait_for, and browser_take_screenshot. Prefer waiting for the text or content you need; use a fixed delay only when the page offers no dependable signal. A delay cannot guarantee that every asynchronous task has finished.

1. Connect a browser MCP server

This example uses the official Playwright MCP server. Its current getting-started guide lists Node.js 20 or newer and an MCP client as prerequisites. It documents an npx configuration that starts @playwright/mcp. Client configuration locations vary, so use your client’s current MCP setup instructions alongside the Playwright MCP getting-started guide.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Restart or reload the MCP client after saving the configuration. The server package and browser selection options can change over time; check the current documentation if setup differs in your client.

2. Navigate and wait for the rendered content

Once connected, ask your MCP client to navigate to the page and wait for a known piece of content to appear. For example:

Navigate to https://example.com/dashboard.
Wait for the text "Account overview" to appear.
Then take a screenshot of the page and save it as dashboard.png.

The corresponding Playwright MCP tools are browser_navigate, browser_wait_for, and browser_take_screenshot. The wait tool supports waiting for text to appear or disappear, and waiting for a duration. Its documented time wait is capped at 30 seconds per invocation. See the Playwright MCP tool reference for the current parameters.

Choose a signal that means the content you need is actually present. A page title or generic loading shell may appear before data-driven content. If the content is an element rather than text, inspect the page with an accessibility snapshot and use a unique, visible text signal where possible. Playwright MCP interactions are based on structured accessibility snapshots; the screenshot is for visual output.

Use a timed wait only as a fallback

If you cannot identify a useful text signal, ask the client to wait briefly before capturing:

Navigate to https://example.com/dashboard.
Wait for 5 seconds.
Take a screenshot of the page and save it as dashboard.png.

Adjust the duration to the page and environment. A fixed pause is simple, but a slow API, third-party script, or delayed hydration can still finish after it. If the supported wait is capped, use multiple waits or switch to a meaningful readiness signal rather than assuming one long delay means all JavaScript is finished.

3. Save the screenshot

After the wait succeeds, call browser_take_screenshot. You can ask the MCP client in plain language, or direct it to use the tool options. Example request:

Take a screenshot of the current page.
Save it as dashboard.webp, use WebP, and capture the full page.

The screenshot tool supports PNG, JPEG, and WebP; a filename; full-page capture; CSS-pixel or device-pixel scale; and a target element. If no filename is supplied, the repository documents a timestamped filename in the configured output directory. Check the current tool reference for exact option names and behavior.

Choosing the capture options

Need Choose Trade-off
What is visible in the browser viewport Default viewport screenshot Does not include content below the fold.
The entire scrollable document Full-page capture Can create a very tall image; the documented full-page option cannot be combined with an element screenshot.
A particular card, chart, or region Element or target capture Identify a unique target from the page structure; it is not a full-page capture.
Predictable dimensions in CSS pixels css scale Smaller and consistent with CSS layout dimensions.
Denser output using device pixels device scale Higher pixel dimensions and larger output.
Lossless output or text and UI detail PNG Often larger than lossy formats.
Smaller photographic output JPEG Lossy compression may affect sharp edges and text.
Modern compressed web image WebP Confirm the downstream tool accepts it.

When saving to a file, make the extension match the chosen image type. If type is omitted, the tool can infer it from the filename extension; otherwise the documented default is PNG.

Make readiness checks reliable

  • Wait for the actual result. Choose distinctive text that appears only after the relevant client-side work completes.
  • Wait for disappearance when appropriate. If a loading message is the clearest signal, wait for it to disappear, then capture. Check that this cannot disappear before the content is ready.
  • Inspect structure before choosing a signal. Use an accessibility snapshot to see available headings, text, and roles. This can help distinguish a loading shell from the page content.
  • Keep capture after the wait. The screenshot reflects the browser state at capture time; a later navigation or interaction changes what is captured.
  • For flaky pages, repeat deliberately. If content is variable, use a stable signal and record failures. Do not treat one successful fixed delay as a readiness guarantee.

There is no universal event that means all JavaScript on every site has finished. Analytics, polling, animations, and background requests may continue after the content you care about is ready. Define readiness in terms of the result your screenshot needs.

Common problems and fixes

Problem Likely cause Fix
MCP server does not connect Invalid client configuration, unsupported Node.js version, or the client has not reloaded its server list. Check the JSON structure, confirm Node.js 20 or newer, reload the client, and follow that client’s current setup instructions.
Screenshot is blank or shows a loading shell Capture ran before the client-rendered content appeared, or the app failed to fetch its data. Wait for distinctive page content, inspect the page snapshot, and check whether the page is logged in or showing an error state.
Wait-for-text never completes The exact text is absent, changed, hidden, or rendered in a different state. Inspect the accessibility snapshot and use text that actually appears. For a page with no stable text, use a bounded delay and understand its limits.
Capture happens too early after the wait The chosen text appeared before the image, chart, or other target finished rendering. Wait for a signal tied to the target itself, or wait for a loading indicator to disappear when that behavior is reliable.
Image is unexpectedly tall Full-page capture includes the entire scrollable document. Use viewport capture for the visible screen, or capture a specific element.
Image looks low resolution CSS-pixel scale was selected. Use device-pixel scale for denser output and account for the larger file.
Wrong format or output location Filename extension, explicit type, or configured output directory does not match expectations. Set the type and filename consistently, and check the MCP server’s output-directory configuration.
Page differs between runs Dynamic data, personalization, animations, login state, or third-party resources vary. Use a consistent browser profile and page state where appropriate; wait for the specific content and avoid capturing during transitions.

Performance, reliability, and cost

A browser MCP server launches or controls a real browser, so navigation, page scripts, image loading, and the chosen wait all contribute to capture time. Waiting for a specific signal can avoid an unnecessary long pause on fast pages, while still allowing slower pages to finish. Full-page and device-scale captures produce more pixels and may take longer or create larger files than viewport and CSS-scale captures.

Reliability depends on the page’s own behavior: an unavailable API, authentication requirement, bot check, or unstable third-party script can prevent the expected content from appearing. A screenshot tool cannot make the page’s JavaScript succeed. For repeatable work, define the desired readiness condition, preserve the necessary session state, and handle a missing signal as a failure rather than silently saving an incomplete image.

The Playwright MCP setup shown here is software configuration and browser execution. This research does not establish a service price for running it; account for your own compute and operational costs if you host or automate it.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can capture a URL with one GET request, or let an AI agent call screenshot tools through MCP. The API supports custom JavaScript and wait options, alongside full-page and element capture. See the ScreenshotNeo API documentation for parameters.

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

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Replace the example URL with your target page and keep the API key private. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

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

FAQ

Does “JavaScript loaded” mean every script has finished?

No. Pages can keep running analytics, animations, or background requests. Wait for the content your screenshot needs.

Can I capture just one element?

Yes. The Playwright MCP screenshot tool accepts an element target. Use a full-page capture when you need the whole document; the two modes cannot be combined.

Can I use another browser?

Playwright MCP documents Chromium-based Chrome, Firefox, WebKit, and Microsoft Edge channel choices. Check its current configuration guide for browser option details.

Do I need a camera or screenshot extension?

No. The MCP server controls a browser and returns or saves the screenshot.

References: Playwright MCP getting started, Playwright MCP repository and tool reference, and Playwright MCP configuration options. Consult these official pages for current version-sensitive setup details.

Keep reading