Recipes
End-to-end working examples for both the Playwright-test and the AI-agent workflows.
Playwright tests
Section titled “Playwright tests”| Recipe | What it shows |
|---|---|
| Annotate on assertion failure | Wrap an assertion in try/catch and annotate the locator that misbehaved. |
| Annotate on failure with the DSL | Same flow with the typed annotation DSL — intent: "error" instead of raw hex, callout instead of three string-concatenated helpers. |
| Draw by DOM locator | Use locator.boundingBox() + rectForBoundingBox to draw an exact overlay rectangle. |
| Attach to the HTML report | Land the annotated PNG inline next to the failing step. |
AI agents (MCP)
Section titled “AI agents (MCP)”| Recipe | What it shows |
|---|---|
| Agent bug-report autopilot | Locator-first MCP workflow: navigate → identify broken element → file a GitHub issue with annotated screenshot in one turn. |
| Generate a manual from screenshots | Combine MCP capture + DSL annotations + the encode pipeline (format: "smart" + saveSizePreset) for ~3–5× smaller per-step bytes. Includes a link to the living-product-docs recipe for the kept-in-sync flavour. |
| Living product docs | Drive annot-product-docs + -astro + -xlsx from a Playwright tour — generate a docs site and an Excel screen-specifications spreadsheet from the same MDX, kept in sync with snapshots. |
Each recipe is self-contained — copy-paste it into a new
example.spec.ts (or paste the MCP payload into your agent’s
prompt), install the packages, and it works against any URL.