Playwright MCP: Query and Filter Websites with an AI Assistant

A browser-capable assistant can filter a directory, open details, and organize evidence. It still needs current page state instead of a guessed sequence of element numbers.

This tutorial selects the Travel category on Books to Scrape, inspects three different books, and saves source-linked results plus a screenshot. Accessibility snapshots support the interaction; a vision model is not required for each click.

Prepare the input addresses

Locate the following pages in your browser, confirm their contents, and copy their full addresses. Obtain service and repository addresses from account integration settings, official setup instructions, or the repository clone menu. Do not derive real addresses from illustrative output.

• BOOKS_LIST_URL: the Books to Scrape homepage address.

Replace each <VARIABLE_NAME> in JSON or task parameters with the copied value before submission; JSON does not expand environment variables. Any example.16yun.cn source in an output illustration shows field structure, not a demo service deployed for this article.

Configure the client and browser

Use Node.js 24, an installed Chrome browser, and an MCP-capable client:

node --version
npx -y @playwright/mcp@latest --help

Add the MCP configuration:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y", "@playwright/mcp@latest",
        "--browser", "chrome",
        "--headless",
        "--isolated"
      ]
    }
  }
}

The package tag is dynamic. Record the resolved version and replace latest with an approved version for a fixed team setup. Consult the official documentation for the current options and tool schemas.

The isolated context intentionally discards session state when closed. Persistent authentication requires a separate, explicit profile or storage-state arrangement.

Navigate and inspect

Confirm that navigation, snapshot, click, screenshot, and close tools are available. Invoke browser_navigate:

{"url": "<BOOKS_LIST_URL>"}

Then call browser_snapshot and locate the Travel link in the current accessibility structure.

Snapshot references describe the current page. They are not permanent IDs and can change after navigation, replacement, or dialogs. There is no fixed reference number that should be copied across sessions.

Apply the category filter and verify it

Use the current Travel reference as the click target:

{
  "target": "<replace-with-the-Travel-reference-from-the-current-snapshot>",
  "element": "Travel category link"
}

Replace the placeholder before submission. Older versions may use ref instead of target; follow the connected tool's schema rather than combining versions.

Take a fresh snapshot after clicking. Confirm the Travel heading and appropriate list before selecting products. A completed click does not establish that filtering took effect.

Inspect three distinct details

For each selected book, obtain the current link reference, open it, check its URL and full heading, and read UPC plus tax-inclusive price. Return to the category and refresh the snapshot before the next selection.

Deduplicate by UPC, not title. If the same book is visited twice, choose another item rather than retaining a duplicate merely to reach three rows.

A complete bounded task description is:

Open the Travel category on Books to Scrape.
Choose only three distinct books from that category and visit each detail page.
Save the complete title, UPC, Price (incl. tax), currency, and actual detail URL.
Read a fresh snapshot after each page change. Record access failures separately;
do not guess missing fields. Return three records when complete and report any
failures or duplicate UPCs. Do not purchase, log in, or write any website data.

The instruction expresses intent; it does not replace observation of actual tools and sources.

Save structured data and a screenshot

Use a consistent result shape:

{
  "category": "Travel",
  "records": [
    {
      "upc": "Read from the detail page",
      "title": "Complete detail-page title",
      "price_including_tax": "Decimal amount from the page",
      "currency": "GBP",
      "source_url": "Actual detail-page URL"
    }
  ],
  "failures": []
}

This is a schema illustration, not collected output. The site's prices are demonstration values. A partially populated array should retain its failure information instead of being described as complete.

Return to the category and invoke the screenshot tool:

{"type": "png", "filename": "travel-list.png", "fullPage": true}

An explicitly named relative file resolves against the MCP client's workspace root. Check the returned path rather than assuming your terminal directory or downloads folder. Automatically named outputs use the configured output directory.

A screenshot helps inspect the selected category; it does not replace detail fields. Full-page and element screenshots have different scopes.

Check and close

Verify category membership, three unique UPCs, corresponding detail URLs, and a consistent price definition. If only two records succeeded, preserve that outcome rather than inventing a third.

Call browser_close when finished. State loss in this isolated session is expected, not a persistence defect.

Troubleshoot

npx cannot start: inspect the client process's PATH and Node installation before changing page steps.

Browser unavailable: check the configured Chrome installation and executable guidance. Unrelated sandbox flags do not repair a missing executable.

Stale reference: take another snapshot and use the current target instead of repeatedly clicking an obsolete number.

A visible link is absent from the snapshot: inspect collapsed content, frames, dialogs, and readiness, using a screenshot when helpful.

The tool rejects ref: inspect whether the installed schema uses target and update the call accordingly.

Screenshot missing: inspect the returned path and workspace root.

Clicks succeed but the category is wrong: verify the page heading and source immediately after filtering.

The assistant composes actions; fresh page evidence and final field checks keep the task grounded.