How to Use an AI Agent to Screenshot a Web App with a Selected Date Range

To screenshot a web app for a selected date range, give an AI agent access to an authorized browser, have it inspect the app’s date controls, set the requested start and end dates, apply the filter if needed, verify the displayed range and results, and then capture the viewport, a specific element, or the full page.

Date pickers differ between apps. The correct input format, timezone, and whether the endpoints are inclusive depend on the target app and task. Do not assume that entering dates or clicking a calendar succeeded: inspect the resulting page before saving the screenshot.

1. Choose an agent and browser setup

There are three common ways to give an agent browser access:

Structured browser automation: use code such as Playwright to locate controls and interact with page elements. This suits a repeated workflow when the app exposes stable controls.
Visual computer use: the agent observes screenshots and issues mouse and keyboard actions through an execution environment. This can adapt to an unfamiliar interface, but requires observing the page between actions.
Hosted browser session: a managed agent browser can handle session creation, activity events, access requests, and session cleanup. Choose this when hosted session management fits the app’s access requirements.

These approaches have different setup and control characteristics; the available documentation does not establish that one is universally faster or more accurate for date selection. Use an environment authorized to access the account and app. OpenAI documents both browser and desktop computer-use patterns, including code execution with Playwright or PyAutoGUI and structured actions handled by the application: Computer use guide. For hosted browser sessions and their lifecycle, see the Agents API computer-use guide.

2. State the range precisely

Give the agent dates in an unambiguous form, such as “from 2025-03-01 through 2025-03-31.” Also specify the timezone and whether both endpoints should count when that matters to the task. These are requirements to obtain from the request or the app: there is no universal date format, timezone, or endpoint rule.

If the range describes a reporting period, be explicit about whether the end date means the beginning or the end of that calendar day in the app’s timezone. If that meaning is unclear, the agent should inspect any visible range summary or ask for clarification rather than guessing.

3. Inspect, set, apply, and verify

Inspect the page. Find the date inputs or calendar, any preset ranges, the apply/filter control, and visible timezone or range labels. Use an accessibility snapshot or DOM locators where available; use screenshots to inspect visually when necessary.
Choose the interaction supported by the app. Some controls accept typed dates; others require calendar navigation or selecting a preset. Follow the rendered interface rather than assuming a generic date-picker behavior.
Set both endpoints. Enter or select the requested start and end dates. Check whether changing one field updates the other or whether the app imposes range limits.
Apply the filter. Click the app’s apply button if present. Some apps update immediately; others reload or need an explicit confirmation.
Wait for the result. Wait for the app’s loading state or relevant result element to settle. A fixed delay can be a fallback, but a visible state change or selector is generally easier to verify.
Verify the selected range and filtered view. Read the visible date summary and confirm that the page reflects the requested range. If either is missing or ambiguous, inspect again before capture.

Browser snapshots can expose accessibility-tree references that an agent can use in later actions; see the Playwright quick start. For screenshot-driven interaction, capture and inspect after meaningful actions. Google’s computer-use guide describes the screenshot, action, and client-side execution pattern.

4. Capture the appropriate part of the page

Choose the capture scope based on what the screenshot must prove:

Viewport: captures the currently visible browser area. Use it when the date controls and relevant results fit on screen.
Element: captures one selected element, such as a chart or report panel. Ensure the selected range is also visible in that element or include the range in surrounding evidence if required.
Full page: captures the scrollable page. Use it for a long report when seeing the whole page matters. It cannot be combined with target-element capture.

Playwright supports PNG, JPEG, and WebP screenshots, a filename, and CSS-pixel or device-pixel scaling. Device-pixel output changes the image resolution relative to CSS pixels; high-resolution screenshots may no longer map directly to CSS-pixel mouse coordinates. See Playwright screenshot options and its CLI screenshot guidance.

5. Runnable example: Playwright with Node.js

This example assumes the app has accessible start and end date inputs, an Apply button, and a visible range summary. Replace the example URL and accessible names with the target app’s actual controls. It uses environment variables for credentials so secrets are not embedded in source code.

import { chromium } from 'playwright';

const appUrl = process.env.APP_URL;
const email = process.env.APP_EMAIL;
const password = process.env.APP_PASSWORD;

if (!appUrl) throw new Error('Set APP_URL');

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext();
const page = await context.newPage();

try {
  await page.goto(appUrl, { waitUntil: 'domcontentloaded' });

  // Adapt this login section to the app. Use only an account you are authorized to access.
  if (email && password) {
    await page.getByLabel(/email/i).fill(email);
    await page.getByLabel(/password/i).fill(password);
    await page.getByRole('button', { name: /sign in|log in/i }).click();
  }

  // Replace these labels with the actual accessible names in the target app.
  await page.getByLabel(/start date/i).fill('2025-03-01');
  await page.getByLabel(/end date/i).fill('2025-03-31');
  await page.getByRole('button', { name: /apply|update|filter/i }).click();

  // Replace with a stable summary or result locator from the app.
  const rangeSummary = page.getByText(/2025-03-01.*2025-03-31/);
  await rangeSummary.waitFor({ state: 'visible', timeout: 15000 });

  // Capture the visible page after confirming the range summary.
  await page.screenshot({ path: 'date-range.png', fullPage: false });
} finally {
  await context.close();
  await browser.close();
}

Install Playwright in your project and install its browser runtime using the commands in the official quick start. The example deliberately uses app-specific labels and a summary locator as placeholders: inspect the actual app and replace them. If the app uses a date picker that rejects typed values, interact with its calendar buttons instead. If a login flow includes an approval or multifactor step, complete it through the app’s authorized process rather than attempting to bypass it.

6. Visual computer-use workflow

When the date controls are unfamiliar or poorly exposed to DOM automation, use an agent that can inspect screenshots and perform computer actions. Give it instructions such as:

Open the authorized web app at [app URL]. Set the date range to 2025-03-01 through 2025-03-31 in the app's displayed timezone. First inspect the date controls and any range summary. Use the app's own controls, apply the range if required, and wait for results to update. Before taking a screenshot, verify that the displayed start and end dates match the requested range and that the results correspond to that view. Save a viewport screenshot as date-range.png. If the app's date meaning or timezone is unclear, stop and report what needs clarification.

The exact action format depends on the computer-use integration. In a screenshot-based loop, the agent should inspect the current image, take a small action, and inspect the updated image before continuing. In a structured-action integration, the application executes the requested browser or desktop operations and can return the resulting screenshot. Keep access limited to the authorized session and avoid exposing credentials in prompts or logs.

7. Or skip the browser setup

If the app already displays the correct date range and you only need a screenshot of its public or accessible page, ScreenshotNeo can return an image from one GET request. It cannot set an app’s date controls or authenticate into a private account; use the browser workflow above to establish the desired state first. See the ScreenshotNeo API documentation for options.

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

For an app page that is already in the required state, change the example URL to the target URL. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot, with each cleanup step able to be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.

8. Reliability, privacy, and cost

Make retries conditional. If navigation or results are still loading, wait for an observable state before retrying an action. Repeatedly clicking Apply can submit or change state more than once in some apps.
Keep evidence tied to state. Capture only after the range summary and relevant results are visible. Use a descriptive filename and retain enough context in the frame to explain what the image shows.
Protect sensitive information. Screenshots may show account details or private page data. Limit access to intended viewers, keep images and credentials out of logs, and review or remove saved browser-session artifacts when the service provides them.
Account for runtime costs. Browser automation consumes local or hosted compute and may require maintaining browser setup and authenticated session state. Hosted sessions add session management considerations. The cited documentation provides no comparative price or performance benchmark for these approaches, so check the selected runtime’s current terms.
For repeated tasks, stabilize the controls. Prefer accessible labels or stable locators and an explicit result condition over coordinates and arbitrary delays. For unfamiliar interfaces, visual observation can help the agent adapt, but each action should be followed by verification.

9. Troubleshooting

Problem	Likely cause	Fix
Date fields cannot be located	The app uses different labels, a custom calendar, or an embedded frame.	Inspect an accessibility snapshot or page structure, identify the actual controls, and update the locator. For visually rendered controls, use screenshot-based interaction.
Typed date is rejected or changes unexpectedly	The field expects another format or only accepts calendar selection.	Inspect placeholder text and app guidance, then use the format and interaction the app exposes. Do not assume ISO dates are accepted everywhere.
Displayed range is right but results look unchanged	The app may need an explicit Apply action, more time to load, or a different filter scope.	Check for an apply/update control, wait for the result area to settle, and verify a visible result or updated timestamp where available.
End date appears excluded	The app may interpret the end boundary differently or use another timezone.	Check the app’s timezone and range semantics. Clarify whether the end should be inclusive; do not silently shift dates to compensate.
Screenshot is blank or incomplete	Navigation, rendering, authentication, or data loading may not have finished.	Wait for a stable page or result element, confirm the app is still authenticated, then capture again. Avoid relying only on a fixed short delay.
Full-page shot omits a chart or section	Some content may render only after scrolling or may be inside a separately rendered region.	Inspect the page and its loading behavior; scroll or wait for the relevant content before capture, or capture the target element if that is the needed evidence.
Screenshot coordinates do not align	The image uses device-pixel scaling while actions use CSS-pixel coordinates.	Use consistent scaling for interaction and capture, and account for the output scale when interpreting coordinates. See the Playwright scaling guidance.
Login requires approval or multifactor authentication	The app requires an additional authorized sign-in step.	Complete the approval through the legitimate app flow or use an approved authenticated session. Do not ask the agent to bypass access controls.

10. FAQ

Can an AI agent infer what date range I meant?

It should not infer missing timezone or endpoint rules when those affect the result. Provide the intended dates and any required boundary meaning explicitly.

Should I use a viewport or full-page screenshot?

Use the viewport when it shows the range and key results together. Use full-page capture when the complete scrollable report is needed; use an element capture for a specific panel.

Can I screenshot a private dashboard with a screenshot API?

A screenshot API request is suitable only when the target page is accessible through the API’s supported request options and permissions. For an already authenticated interactive session, use an authorized browser environment; do not expose session credentials in a public URL.

How do I keep the result reproducible?

Record the requested dates, timezone, app-specific date semantics, stable control locators, verification condition, capture scope, and output filename alongside the workflow.