How to capture a product page screenshot after selecting a subscription plan

To capture a product page after choosing a subscription plan, select the plan using the page’s own controls, verify that its name, price, and billing interval are visibly selected, and only then take the screenshot. For a one-off record, use your browser or operating system’s screenshot controls. For a repeatable QA flow, automate the selection and capture with Playwright.

1. Select the plan and verify the page state

Open the product page and bring the plan selector and relevant details into view.
Select the intended plan using the page’s own controls. This might be a card, radio button, button, or billing-period toggle.
Check that the page visibly reflects the selection. Confirm the plan name and any price or billing interval you need to document. A click alone does not prove the selection registered.
If the page updates asynchronously or navigates, wait for the relevant state to appear before capturing.
Frame the screenshot so the selected plan and enough surrounding product-page context are legible.

For manual capture, use the screenshot function provided by your browser or operating system. The exact controls depend on the platform, so use its current help documentation rather than assuming a universal keyboard shortcut.

2. Choose the right screenshot framing

Viewport: Use a normal visible-screen capture when the selected plan and necessary identifying context fit on screen.
Full page: Use a full-page capture when details needed as evidence are below the fold. Check the resulting image to ensure the selected state remains understandable.
Element: Capture the plan selector or a specific component when the surrounding page is not needed. Keep enough context to identify what the component belongs to.

Playwright supports viewport, full-page, and element screenshots; the appropriate choice depends on what must be visible in the record. See the Playwright screenshots guide and its Page API documentation.

3. Automate selection and capture with Playwright

Use browser automation when you need the same interaction-and-capture sequence repeatedly, such as in a QA check. Replace the example URL and selectors with the actual product page and controls. The script checks for a visible selected state before saving the screenshot.

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/product', { waitUntil: 'domcontentloaded' });

  // Replace this selector with the control for the intended plan.
  await page.getByRole('radio', { name: /pro plan/i }).check();

  // Replace the locator and expected text with the page's visible confirmation.
  const selectedPlan = page.locator('[data-plan="pro"]');
  await selectedPlan.waitFor({ state: 'visible' });
  await selectedPlan.screenshot({ path: 'selected-plan.png' });
} finally {
  await browser.close();
}

Install Playwright and its browser in your project using the current official installation instructions. The locator is deliberately site-specific: inspect the page and choose a stable accessible role, label, or selector. If the plan is represented by a button rather than a radio input, use an appropriate locator and click it, then wait for a visible selected indicator or updated price before capturing.

Full-page or viewport variant

To capture the full page rather than just the selected plan element, replace the element screenshot line with:

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

For a viewport screenshot, use await page.screenshot({ path: 'selected-plan-viewport.png' }). The viewport dimensions in newPage help make repeat runs consistent. Playwright documents navigation, waiting, and screenshot options in its Page API.

4. Make the capture reliable and useful

Wait for a meaningful condition. Prefer waiting for the selected plan indicator, updated price, or confirmation text over an arbitrary delay. If the site has a known delayed update, wait for that state before capturing.
Use stable selectors. Accessible names and roles are often clearer than selectors tied to layout or styling. Update selectors when the product page changes.
Keep the frame readable. Use dimensions that show the choice and its context. Check text legibility and avoid cropping the plan name, price, or billing period.
Choose the capture scope intentionally. Element capture is focused; viewport capture preserves the visible context; full-page capture includes content below the fold.
Preserve the original image. Save the resulting image in the format your capture method provides, and avoid edits that obscure what state the page showed.

For a more involved live-page session, the Capture.page browser sessions documentation describes navigating, clicking, selecting, waiting, querying, and capturing in a persistent browser session. This is one vendor’s example of an interaction workflow.

5. Troubleshooting

Symptom	Likely cause	What to do
The screenshot shows the old plan	The click did not register, or the page had not updated yet.	Check the control’s selected state and updated plan details. Wait for a visible confirmation before capturing.
The script cannot find the plan control	The example selector does not match the page, or the control is rendered differently.	Inspect the page and replace the role, accessible name, or CSS selector with one that identifies the actual control.
The selected plan is cut off	The viewport or element bounds do not include the relevant details.	Adjust the viewport or capture the full page or a larger component, then confirm the plan and context are legible.
The price or billing period is missing	The capture happened before the page finished its update, or those details are outside the captured area.	Wait for the updated price or interval to become visible and frame those details in the screenshot.
A full-page image is difficult to interpret	The relevant choice is small relative to the full page.	Use a viewport or element capture when it preserves the needed context more clearly.
The page navigates after selection	The plan control advances to another step or route.	Wait for the destination state or confirmation that documents the selected plan, then capture that state.

6. Performance, reliability, and cost

A manual capture is usually the simplest approach for a one-off screenshot. Browser automation adds setup, browser startup, page loading, and selector maintenance, but makes the steps reproducible. No single wait strategy or runtime applies to every site: wait for the state relevant to the page rather than relying on a fixed pause.

For recurring captures, keep the viewport and selectors stable, make the script fail clearly if the expected selected state is absent, and review the saved image when the page’s plan flow changes. Playwright is browser automation software; the cited documentation does not establish a universal runtime or cost for a given capture.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its click-element option can select a page control before capture; use a selector suited to the product page, then verify that the captured result reflects the intended state. For all available parameters, 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

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);

Adapt the target URL and add the documented click-element parameter and selector for the plan control when the page requires interaction. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; 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, and paid plans start at $5 for 3,000. Sign up for free and capture up to 1,000 screenshots a month with no card.

FAQ

How do I know the plan was selected?

Check the visible selected indicator and any plan name, price, billing interval, or confirmation the page provides before capturing.

Should I use a full-page screenshot?

Use it when required details are below the fold. If the selected plan and needed context fit in the viewport, a viewport capture may be easier to read.

Can I capture only the plan card?

Yes. Playwright can capture a specific element. Keep enough surrounding context to identify the page and make the recorded choice understandable.

Is an extension required?

No. Manual browser or operating-system capture works for a one-off image, and browser automation suits repeatable flows. An extension may be useful if you specifically need area selection or annotations; check its current vendor documentation for available features.