DEV Community

TreeSoop
TreeSoop

Posted on • Originally published at treesoop.com

Stop burning tokens on DOM noise: a Playwright MCP optimizer layer

If you've used Playwright MCP for AI browser automation, you know the pain. Every page navigation dumps the full DOM tree into the model context. Simple flows like "order 5 items from this shop" can burn hundreds of thousands of tokens on navbar/sidebar/footer noise that has nothing to do with the task.

We built a small MCP layer that sits in front of Playwright and only forwards the relevant bits. Open sourced it.

📚 Full writeup: https://treesoop.com/blog/playwright-mcp-optimizer-token-saving-2026
🔧 GitHub: https://github.com/treesoop/claude-native-plugin

The problem

Playwright MCP serializes the full DOM:

AI ← {ENTIRE_DOM_JSON} ← Playwright MCP
Enter fullscreen mode Exit fullscreen mode

This works for QA where you need to see everything. For "browse and take an action" it's 5-10× the tokens you actually need.

The optimizer

AI ← {relevant_only} ← Optimizer ← {full DOM} ← Playwright MCP
Enter fullscreen mode Exit fullscreen mode

Three filter rules:

  1. Interactive elements first: button, input, a — not decorative div/span
  2. Semantic grouping: navigation / main / form / footer regions, so the model knows where it is
  3. Task-aware skipping: if the current task is "checkout", skip sidebar recommendations and ad banners

Measured impact

On a "cart → checkout" flow with GPT-4: tokens dropped substantially, and round-trip latency improved as a side effect (smaller payloads → faster agent decisions).

Not a silver bullet. For QA tasks where you need full DOM accuracy, use vanilla Playwright MCP. For general browsing / automation agents, this is the cheaper + faster path.

Tool comparison (our testing)

Tool Strength Use for
playwright-mcp (default) Full DOM accuracy QA, complex validation
playwright-optimizer (this) Token efficiency Automation agents, browsing
vercel-browser-agent Code generation speed Simple browsing
claude-chrome-extension Uses logged-in session Tasks needing auth state

We use all four for different jobs.

Install

npm install -g @treesoop/playwright-optimizer
claude mcp add playwright-opt -- playwright-optimizer
Enter fullscreen mode Exit fullscreen mode
  • MIT licensed
  • Configurable per-site presets
  • --log-tokens flag for measurement

More OSS from TreeSoop: ai-news-mcp, hwp-mcp, whisper_transcription, claude2codex

Blog: https://treesoop.com/blog

Top comments (0)