How to Click a Button Before Taking a Screenshot with a Screenshot API

To click a button before taking a screenshot, await the click, wait for the page state you need to appear, and only then capture the page. In Playwright, that means await locator.click(), an outcome-specific wait when needed, and page.screenshot(). The click normally waits for actionability and any navigation it starts; it cannot guarantee that unrelated asynchronous content has finished loading. [Playwright Locator click]

1. Use Playwright: click, wait, capture

Install Playwright and its Chromium browser, then save this as screenshot-after-click.mjs. Replace the example URL, button name, and result text with values from the page you want to capture.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });

try {
  await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
  await page.getByRole('button', { name: 'Show details' }).click();

  // Wait for the result of the click, not an arbitrary amount of time.
  await page.getByText('Details loaded').waitFor({ state: 'visible' });

  await page.screenshot({ path: 'after-click.png' });
} finally {
  await browser.close();
}

Install the package and browser with npm install playwright and npx playwright install chromium. The locator uses the button’s accessible role and name, which is generally more resilient than a positional selector. The sample’s label and result are placeholders; choose selectors that match the actual page.

Wait for the right outcome

An awaited locator click checks that the element is attached and actionable, scrolls it into view when needed, clicks it, and normally waits for navigation initiated by the click. [Locator click] Navigation readiness and application readiness are different: a page may navigate successfully and then fetch or render the data you need. For a non-navigating click, the click promise can resolve before a delayed UI update. Wait for the result that matters:

Confirmation or loaded content: wait for a unique message, heading, or result element to become visible.
Dialog: wait for the dialog locator to become visible, then capture the page or dialog.
URL transition: wait for the expected URL when the click changes routes.
Known fixed delay: use a short timeout only when the page has no observable state to wait for; fixed sleeps are fragile when load times vary.

For a navigation triggered by a button, register the URL wait alongside the click to avoid missing a fast transition:

await Promise.all([
  page.waitForURL('**/details'),
  page.getByRole('button', { name: 'Open details' }).click(),
]);
await page.screenshot({ path: 'details.png' });

Use a condition tied to the expected result rather than treating a successful click as proof that the desired content is ready. This follows from the distinction between click/navigation behavior and application-specific updates.

2. Choose what to capture

Playwright’s page screenshot captures the current page view by default. Use full-page capture when the evidence must include content below the fold, or a locator screenshot when only a particular element matters. [Playwright screenshots guide]

// Current viewport
await page.screenshot({ path: 'viewport.png' });

// Entire scrollable page
await page.screenshot({ path: 'full-page.png', fullPage: true });

// A specific result or dialog
await page.getByRole('dialog').screenshot({ path: 'dialog.png' });

Capture after the state wait in every case. Full-page screenshots can include more than the changed component; element capture narrows the image to the specific result.

3. Make the capture stable

For a one-off screenshot, waiting for the relevant UI state is usually the important synchronization step. For visual regression assertions, Playwright Test’s toHaveScreenshot() waits for consecutive screenshots to stabilize before comparing against an expectation. It complements a semantic post-click wait; it does not tell you whether the button produced the intended result. [Playwright visual comparisons]

Keep the rendering environment consistent for repeatable visual comparisons. Operating system, browser version, settings, hardware, power source, and headless mode can affect rendering. [Playwright visual comparisons]

Use the same browser version and viewport across runs.
Wait for the expected changed content, not just navigation.
For baseline comparisons, run in a consistent environment.
Prefer role and accessible-name locators, or stable application selectors, over brittle DOM positions.

4. Screenshot API versus browser automation

“Screenshot API” can mean a hosted endpoint or a browser automation library. The click-and-capture sequence above uses Playwright running a browser you control. A hosted screenshot endpoint may accept capture options but not expose a way to interact with the page first; check that provider’s API before relying on click support. Playwright MCP is another interface: its screenshot tool is for visual inspection, while browser snapshots provide references for interaction. [Playwright Locator API] [Playwright MCP]

If you need to click arbitrary page controls, use browser automation that supports interaction. If the page can be captured in its initial state, a screenshot API can avoid managing browser installation and execution yourself.

5. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API captures a URL with one GET request; it does not perform an arbitrary button click, so use the Playwright workflow above when the target state requires clicking. For a page that is ready to capture by URL, the request is:

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

See the ScreenshotNeo API documentation for parameters and response details. Cookie banners are accepted or removed before the shot, along with known newsletter popups and chat widgets. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status. Its MCP server gives AI agents screenshot, page-info, and PDF capture tools. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

6. Troubleshooting

Symptom	Likely cause	Fix
Timeout during click	The button is hidden, covered, disabled, detached, or the locator matches the wrong element.	Check the role/name and page state; wait for the button to become visible and enabled. Avoid forcing a click unless bypassing actionability checks is intentional.
Screenshot shows the old content	The click completed, but an asynchronous update has not rendered.	Wait for a unique result element, changed heading, dialog, or expected URL before capturing.
Navigation wait hangs	The click did not navigate, or the URL pattern does not match the destination.	Use a state wait for the intended in-page update, or correct the URL pattern. Only wait for navigation when navigation is expected.
Element not found	The page has not reached the relevant state, the locator text differs, or the content is in a frame.	Inspect the accessible name and page structure, wait for the relevant content, and target the correct frame if applicable.
Screenshot differs between runs	Rendering environment or page content changed, or the capture happened before the page stabilized.	Wait for the semantic result and keep browser version, operating system, viewport, and rendering settings consistent.
Hosted API image does not show a clicked state	A URL capture request does not necessarily execute browser interactions.	Use Playwright (or another interaction-capable browser automation tool) to click and then capture; verify any provider-specific interaction feature in its documentation.

7. Performance, reliability, and cost

Playwright runs a browser process, so the script must account for browser installation, startup, navigation, and the page’s own loading behavior. Reuse a browser process when taking multiple captures in one job, and close it in a finally block so errors do not leave it running. Use explicit outcome waits to avoid both premature captures and unnecessary fixed delays. Reliability depends on stable selectors and a meaningful post-click condition.

A self-managed Playwright capture uses your compute and browser infrastructure; its cost depends on where and how often you run it. A hosted screenshot API shifts browser execution to the provider and may bill according to its own plan and response rules. For ScreenshotNeo specifically, only clean shots are billed; bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response reports verdict and billing headers. Plan prices are Free for 1,000 shots monthly, Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; annual billing gives two months free. Every feature is available on every plan. See the documentation for API configuration.

FAQ

Does awaiting the click guarantee that the screenshot shows the final page?

No. It handles the click and normally any navigation it initiates. Wait separately for application content that updates asynchronously.

Can I capture only the result of the button?

Yes. After waiting for the result, take a locator screenshot of the result element instead of the full page.

Can I click a button using ScreenshotNeo’s one-call URL endpoint?

The supplied ScreenshotNeo endpoint captures a URL and supports capture options; it does not provide an arbitrary click action. Use Playwright when a click is required before capture.

Should I use a fixed sleep or wait for a selector?

Wait for a selector or other observable outcome when possible. A fixed delay can be too short on a slow run and waste time on a fast one.