How to Use an AI Agent to Screenshot a Webpage with a Custom Viewport and Locale

Set the browser context’s viewport and locale before navigating to the page, then take a screenshot. An AI agent can write or run the short automation script, but Playwright supplies the browser controls that set those values and capture the image. Playwright is browser automation software, not itself an AI agent.

This method emulates the browser’s screen dimensions and locale signals. It does not guarantee that a site will translate its content or show a particular regional version: that depends on how the site handles those signals.

1. Install Playwright and its browser

Use Node.js and Playwright for the JavaScript example below. In a new project directory, install the package and Chromium:

npm init -y
npm install playwright
npx playwright install chromium

The commands install the Playwright library and its Chromium browser. If your environment already has Playwright and a browser installed, use those instead. Check the documentation for the API version installed in your project if behavior differs.

Save this as screenshot.js and run it with node screenshot.js. Replace the example URL, dimensions, locale, and output filename with your inputs.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const context = await browser.newContext({
      viewport: { width: 1440, height: 900 },
      locale: 'fr-FR',
    });
    const page = await context.newPage();

    await page.goto('https://example.com', { waitUntil: 'load' });
    await page.screenshot({ path: 'page-fr-1440x900.png' });
  } finally {
    await browser.close();
  }
})();

The context is configured before the page opens the site. That order lets responsive pages see the intended viewport during initial loading. The default screenshot covers the visible viewport. To capture the full scrollable page, change the screenshot call to:

await page.screenshot({ path: 'page-fr-1440x900-full.png', fullPage: true });

Playwright documents locale settings such as en-GB and de-DE. Locale affects navigator.language, the Accept-Language request header, and number and date formatting rules. A site may ignore those signals, require a separate language selector, or use account and location settings to choose its content. Playwright emulation documentation describes the browser behavior.

3. Choose the capture dimensions and output

Viewport size

viewport takes numeric pixel dimensions: { width, height }. Playwright documents 1280×720 as its default consistent viewport. Choose dimensions that match the layout you need to inspect, such as a desktop breakpoint or a mobile-sized viewport.

Set the viewport in browser.newContext() before creating the page when possible. To resize an existing page, Playwright provides page.setViewportSize({ width, height }). Its documentation cautions that many sites do not expect a phone-sized viewport to change during a session and recommends setting it before navigation. Resizing also resets screen size; use context-level screen and viewport settings when those values need separate control. See BrowserType and Page API documentation.

Viewport or full page

Option	What it captures	Use it for
Default	The visible viewport	A specific screen area, responsive layout, or above-the-fold check
`fullPage: true`	The full scrollable page	A long-page overview or archive

Full-page output can be much taller than a viewport capture. For pages with sticky elements, lazy-loaded content, or animations, inspect the result to confirm the captured image represents the state you intended.

Image format and scale

The output file extension controls the format when the format is not specified; Playwright’s screenshot API also provides screenshot options for type and scale. Use a deliberate path and a format suited to the next step in your workflow. PNG is a practical choice when you want a lossless image. Check the Page screenshot API for options supported by your installed Playwright version.

4. Have an AI agent produce or run the script

Give an AI agent the concrete inputs and ask it to create or execute a Playwright script. For example:

Capture https://example.com at a 1440 by 900 pixel viewport using the fr-FR locale.
Save a viewport screenshot as page-fr-1440x900.png. Use Playwright and report the output path.

The agent needs access to a runtime with Playwright and its browser installed if it is expected to execute the code. Otherwise, it can prepare the script for you to run. If an agent environment already exposes browser tools, check which capture controls and runtime it supports before choosing an interface.

Playwright also documents screenshot commands in its agent CLI and screenshot tools in its MCP server. Those interfaces may be convenient when they are already available to the agent; their options and syntax differ from the direct JavaScript API. See Playwright agent CLI screenshots and PDF and Playwright MCP screenshots.

5. Troubleshoot common problems

Symptom	Likely cause	What to do
The page still shows the default layout	The viewport was set after navigation, the dimensions do not cross the site’s responsive breakpoint, or the site’s styles do not adapt.	Set the context viewport before opening the page. Confirm the dimensions and inspect the site’s layout behavior.
The page is not translated	The site may not use browser locale to choose its language.	Check whether the site has a language selector or a locale-specific URL. Locale emulation sets browser signals; it does not force translation.
Dates or numbers look unchanged	The page may format them itself or use a fixed locale.	Check the page’s own settings and scripts. Confirm the configured locale in the browser context.
The screenshot is only part of the page	Viewport capture is the default.	Pass `fullPage: true` to capture the full scrollable page.
The capture is blank or navigation fails	The URL may be unreachable from the runtime, the load may time out, or the page may require authentication.	Open the URL from the same environment, handle the page’s required authentication if appropriate, and choose a navigation wait condition that matches the site. Do not assume a successful navigation means all page content has finished rendering.
The site looks different from a real phone	A viewport alone does not reproduce every device characteristic.	Set the viewport before navigation and review Playwright’s device emulation options if you need more than dimensions.
The script cannot find Playwright or Chromium	The package or browser may not be installed in the environment running the script.	Install the project dependency and Chromium with the commands in section 1, using the same environment that runs the script.

6. Performance, reliability, and cost

Browser startup, navigation, page rendering, and full-page capture all take time. Reuse a browser process for multiple captures when appropriate, while creating contexts with the settings each task needs. Set a navigation timeout suitable for the site and decide whether the capture should wait for the page load event or a more specific ready state. A fast response is not proof that all dynamically rendered content has appeared.

For repeatable results, keep the URL, viewport, locale, browser version, and capture options consistent. Save to a predictable path and inspect the output when visual correctness matters. Sites can change between runs, and locale-dependent content can also vary with the site’s own behavior.

Playwright is browser automation software; costs depend on where and how you run the browser. This dossier provides no pricing or benchmark data for browser hosting, so estimate execution time and infrastructure cost in your own environment.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API takes one GET request for an image or PDF, and its documentation covers the available options.

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

For a simple call in Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Or in Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

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; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.

FAQ

Does setting a locale change the website’s language?

It changes browser locale signals and formatting behavior. Whether a site changes language depends on the site.

Can I use a locale such as `en-GB`?

Yes. Playwright’s documented examples include en-GB and de-DE; use the locale you need.

Should I use an AI agent or Playwright?

They serve different roles: the agent can prepare or run the task, while Playwright provides the browser automation controls in this example.

What if I need a screenshot of the visible screen only?

Use the default page.screenshot() call and omit fullPage.