playwright-spatial-layout-mcp
About
Geometric vision for AI agents: bounding boxes, occlusion, viewport reflow
Explore
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
playwright-spatial-layout-mcpCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"playwright-spatial-layout-mcp": {
"server": {
"command": "npx",
"args": [
"-y",
"playwright-spatial-layout-mcp"
]
}
}
}
}McpServers
{
"server": {
"command": "npx",
"args": [
"-y",
"playwright-spatial-layout-mcp"
]
}
}Transport
"stdio"Package
"playwright-spatial-layout-mcp"Registry
"npm"Geometric vision for AI agents: bounding boxes, occlusion, viewport reflow
An MCP server that gives AI agentsgeometric spatial awarenessof web page layouts using Playwright.
AI agents can read the DOM and know a button exists — but they can't see that it's hidden under a sticky header, pushed off-screen by a broken CSS rule, or overlapping another element on mobile. This MCP fixes that by exposing real bounding box mathematics from a live browser.
When an AI agent analyzes a Playwright test failure, it reads the accessibility tree:
"The Submit button exists in the DOM. It has role=button. It is visible."
playwright-spatial-layout-mcpgives the agent coordinates, intersection ratios, and layout shift data so it can reason about therendered page— not just the markup.
Returns position, size, z-index, and viewport visibility for one or more elements.
{ "url": "https://your-app.com", "selectors": ["header", ".hero-cta", "footer"], "viewport": { "width": 375, "height": 812 } }
[ { "selector": ".hero-cta", "box": { "x": 16, "y": 892, "width": 343, "height": 48 }, "z_index": "auto", "is_visible": true, "is_in_viewport": false } ]
Checks if one element physically overlaps another by computing bounding box intersection.
{ "is_occluded": true, "intersection_ratio": 0.61, "occluded_area_px": 4128 }
Validates a set of layout rules and returns pass/fail with a human-readable reason per rule.
Supported rule types:left_of·right_of·above·below·contains·not_overlapping
{ "url": "https://your-app.com", "rules": [ { "type": "above", "element_a": "nav", "element_b": ".hero" }, { "type": "not_overlapping", "element_a": ".sidebar", "element_b": ".main-content" } ] }
{ "passed": false, "results": [ { "passed": true, "reason": "'nav' bottom (64px) is above '.hero' top (64px)" }, { "passed": false, "reason": "'.sidebar' and '.main-content' overlap by 12%" } ] }
Measures how element positions and sizes change across multiple viewport sizes.
{ "url": "https://your-app.com", "selectors": ["nav", ".hero", ".cta-button"], "viewports": [ { "width": 375, "height": 812 }, { "width": 768, "height": 1024 }, { "width": 1280, "height": 720 } ] }
[ { "selector": ".cta-button", "shifted": true, "max_delta_x": 442, "max_delta_y": 318, "max_delta_width": 897, "max_delta_height": 0 } ]
npm install -g playwright-spatial-layout-mcp npx playwright install chromium
{ "mcpServers": { "playwright-spatial-layout-mcp": { "command": "npx", "args": ["-y", "playwright-spatial-layout-mcp"] } } }
"Verify that the navigation is above the hero section and the sidebar doesn't overlap the main content"
"Show me which elements shift the most when resizing from desktop to mobile"
"Is the promotional modal covering the primary CTA on iPad viewport?"
- playwright-trace-decoder-mcp— root-cause analysis of CI failures from Playwright traces
- flakiness-knowledge-graph-mcp— knowledge graph of flaky test patterns
- ast-impact-mapper-mcp— find affected tests from code changes via TypeScript AST
- zod-contract-mock-forge-mcp— deterministic mock generation from Zod schemas
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
An AI agent for the Playwright MCP server, enabling automated web testing and interaction.
Generate Playwright BDD tests, GitHub Actions and Azure Pipelines with business-rule traceability, focused CodeGraph context and persistent Engram memory.
Autonomous QA MCP that tests web and macOS apps like a real engineer and verifies every bug.
A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.
Browser automation via Chrome DevTools Protocol
Drive, inspect, and assert on real Electron desktop apps from an AI agent — agent-native, Playwright-style automation with accessibility refs, stable error codes, and retrying assertions
Playwright MCP for Godot, screenshots, SceneTree manipulation, and arbitrary GDScript execution at runtime through a local UDP bridge.
A lightweight, AI-powered end-to-end testing framework for CI workflows. Requires an OpenAI API key.
Automate web testing and tasks by connecting Claude Desktop with Playwright.
Create and manage end-to-end tests using the Octomind platform.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
