Why use extraction instead of DOM parsing? Modern UIs stream content, render charts on canvas, and personalize layouts.
page.extract()
works on the final pixels, so it succeeds even when markup is noisy or inaccessible—ideal for dashboards, PDFs, and media-heavy experiences.Installation
Install the Stably Playwright test integration and import it in place of the Playwright test runner:page
fixture gains AI helpers such as page.extract()
.
page.extract
Request natural-language or structured data from the currently visible page. Extraction is fully visual—the SDK stabilizes the viewport, captures a screenshot, and routes it through Stably’s multimodal model.Basic Usage
page.extract()
resolves to a string
. Treat it like any text response—log it, snapshot it, or pass it into downstream logic.
Structured Extraction with Zod
Provide a Zod schema to guarantee shape and types. The model fills the schema while the SDK validates the response locally before returning.Method Signatures
What Happens Under the Hood
- Visual capture – Stably waits for the page to stabilize and captures the requested region (full-page if necessary).
- Prompt grounding – Your instruction plus optional schema are sent to the vision-language model. 3 Response – The method resolves with either the raw string answer or the parsed object.
Common Use Cases
- Verify financial reports – Extract totals from revenue dashboards rendered as canvas charts.
- Read generated PDFs – Capture invoice numbers, totals, and due dates from embedded PDF viewers.
- Collect UI copy – Pull disclaimers or policy text to snapshot legal updates.
- Bridge to assertions – Feed extracted values into Playwright
expect
checks or your own business logic.
Best Practices
- Be explicit – Mention the units, format, or section name you expect the model to read.
- Focus the viewport – Scroll to the relevant component or collapse secondary panels before calling
extract
to reduce noise. - Pre-stabilize – Wait for charts, skeleton loaders, and animations to finish before calling
extract
. - Validate results – Pair schema-based extraction with standard
expect
assertions or downstream checks. - Guard sensitive data – Extraction reveals what is visually rendered; avoid prompts that might echo secrets.
Troubleshooting
Result is incomplete- Ensure the requested elements are visible (no additional scrolling or hidden tabs).
- Rephrase the prompt to reference distinctive labels or surrounding context.
- Inspect the thrown error to see the model’s raw answer.
- Relax overly strict fields (e.g., accept strings and coerce to numbers) or clarify the prompt format.
- Limit the visible region before calling
extract
(collapse sidebars, scroll the target content into view). - Batch related fields into a single schema-driven request to minimize round trips.
References
- Stably Playwright SDK:
@stablyai/playwright-test
- Zod schemas: https://zod.dev
- Related feature: AI Assertions