diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3a04e2ad2..75810741a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -118,6 +118,8 @@ You can use the `DEBUG` environment variable as usual to control categories that
 
 When adding a new tool or updating a tool name or description, make sure to run `npm run gen` to generate the tool reference documentation.
 
+If the change affects when or why to use a tool, update `docs/mcp-tools-user-guide.md` as well.
+
 ### Contributing to Evals
 
 We use Gemini to evaluate the MCP server tools in `scripts/eval_scenarios`.
diff --git a/README.md b/README.md
index ebb3a4b09..c6917d779 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ control and inspect a live Chrome browser. It acts as a Model-Context-Protocol
 Chrome DevTools for reliable automation, in-depth debugging, and performance analysis.
 A [CLI](docs/cli.md) is also provided for use without MCP.
 
-## [Tool reference](./docs/tool-reference.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
+## [Tool reference](./docs/tool-reference.md) | [MCP tools guide](./docs/mcp-tools-user-guide.md) | [Changelog](./CHANGELOG.md) | [Contributing](./CONTRIBUTING.md) | [Troubleshooting](./docs/troubleshooting.md) | [Design Principles](./docs/design-principles.md)
 
 ## Key features
 
@@ -475,6 +475,8 @@ Your MCP client should open the browser and record a performance trace.
 
 If you run into any issues, checkout our [troubleshooting guide](./docs/troubleshooting.md).
 
+For scenario-based guidance on each tool, see the [MCP tools guide](./docs/mcp-tools-user-guide.md).
+
 <!-- BEGIN AUTO GENERATED TOOLS -->
 
 - **Input automation** (9 tools)
@@ -505,11 +507,19 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
 - **Network** (2 tools)
   - [`get_network_request`](docs/tool-reference.md#get_network_request)
   - [`list_network_requests`](docs/tool-reference.md#list_network_requests)
-- **Debugging** (6 tools)
+- **Debugging** (14 tools)
+  - [`diff_computed_styles`](docs/tool-reference.md#diff_computed_styles)
+  - [`diff_computed_styles_snapshot`](docs/tool-reference.md#diff_computed_styles_snapshot)
   - [`evaluate_script`](docs/tool-reference.md#evaluate_script)
+  - [`get_box_model`](docs/tool-reference.md#get_box_model)
+  - [`get_computed_styles`](docs/tool-reference.md#get_computed_styles)
+  - [`get_computed_styles_batch`](docs/tool-reference.md#get_computed_styles_batch)
   - [`get_console_message`](docs/tool-reference.md#get_console_message)
+  - [`get_visibility`](docs/tool-reference.md#get_visibility)
+  - [`highlight_elements_for_styles`](docs/tool-reference.md#highlight_elements_for_styles)
   - [`lighthouse_audit`](docs/tool-reference.md#lighthouse_audit)
   - [`list_console_messages`](docs/tool-reference.md#list_console_messages)
+  - [`save_computed_styles_snapshot`](docs/tool-reference.md#save_computed_styles_snapshot)
   - [`take_screenshot`](docs/tool-reference.md#take_screenshot)
   - [`take_snapshot`](docs/tool-reference.md#take_snapshot)
 
diff --git a/docs/mcp-tools-user-guide.md b/docs/mcp-tools-user-guide.md
new file mode 100644
index 000000000..7ab99f2dd
--- /dev/null
+++ b/docs/mcp-tools-user-guide.md
@@ -0,0 +1,282 @@
+# Chrome DevTools MCP — tools user guide
+
+This guide explains **when and how** to use each MCP tool. For parameter details, see [tool-reference.md](./tool-reference.md).
+
+## Core workflow (recommended)
+
+1. **`list_pages`** — See open tabs; note `pageId` for the tab you care about.
+2. **`select_page`** — Target that tab for subsequent tools (unless you only
+   have one page).
+3. **`take_snapshot`** — Get the accessibility tree with **`uid`** values
+   for elements. **Prefer this over screenshots** for structure and automation.
+4. Act (navigate, click, fill, etc.), then **`take_snapshot`** again when the
+   DOM may have changed.
+
+**uids expire** when the page updates. Always use the **latest** snapshot.
+
+---
+
+## Navigation automation
+
+### `list_pages`
+
+- **Use when:** You need to know which tabs exist, their URLs, or which `pageId` to pass to `select_page` / `close_page`.
+- **Typical scenario:** Multi-tab debugging; picking the tab that shows the bug.
+
+### `select_page`
+
+- **Use when:** More than one tab is open, or you need to switch context.
+- **Pairs with:** Every page-scoped tool after switching tabs.
+
+### `new_page`
+
+- **Use when:** You need a fresh tab, a specific URL in isolation, or an
+  **`isolatedContext`** (separate cookies/storage from the default profile).
+- **Typical scenario:** Testing logged-out vs logged-in side by side.
+
+### `navigate_page`
+
+- **Use when:** Loading a URL, going **back/forward**, **reload** (optionally
+  **ignore cache**), or injecting an **init script** before the next document.
+- **Prefer over** asking the user to open links manually.
+
+### `close_page`
+
+- **Use when:** Cleaning up extra tabs. **Cannot** close the last remaining page.
+
+### `wait_for`
+
+- **Use when:** The UI updates asynchronously; wait until **any** of the given
+  strings appears before continuing.
+- **Pairs with:** `take_snapshot` after the wait.
+
+### `get_tab_id` _(experimental)_
+
+- **Use when:** Integrating with external tooling that needs the Chrome **tab
+  ID** for the selected page.
+
+---
+
+## Input automation
+
+All of these need **`uid`** values from **`take_snapshot`** (except
+`type_text`, which uses the focused element).
+
+### `click`
+
+- **Use when:** Activating buttons, links, controls, or opening menus.
+- **Tip:** Use **`dblClick`** when a double-click is required.
+
+### `click_at` _(experimental vision)_
+
+- **Use when:** You must hit **pixel coordinates** (e.g. canvas, non-a11y
+  overlay) and **`uid`-based `click`** is not enough.
+
+### `hover`
+
+- **Use when:** Revealing tooltips, mega-menus, or hover-only controls before
+  another action.
+
+### `fill`
+
+- **Use when:** Setting **inputs**, **text areas**, **`<select>`**, or
+  combobox-like controls with option children.
+- **Prefer over** `type_text` when you have a clear field `uid`.
+
+### `fill_form`
+
+- **Use when:** Many fields should be set in one pass (forms, wizards).
+
+### `type_text`
+
+- **Use when:** Simulating **keystrokes** after focus (e.g. contenteditable,
+  IME-heavy fields). Optional **`submitKey`** (e.g. Enter).
+
+### `press_key`
+
+- **Use when:** Shortcuts (**Ctrl+R**), Escape, Tab navigation, or keys that
+  **`fill`** does not model.
+
+### `drag`
+
+- **Use when:** Drag-and-drop between two elements identified by **`from_uid`**
+  and **`to_uid`**.
+
+### `upload_file`
+
+- **Use when:** Attaching a file; pass a real **`filePath`** on the MCP host.
+
+### `handle_dialog`
+
+- **Use when:** **`alert` / `confirm` / `prompt`** blocks automation; accept
+  or dismiss, with optional **`promptText`**.
+
+---
+
+## Emulation
+
+### `emulate`
+
+- **Use when:** Reproducing **mobile**, **slow network**, **CPU throttling**,
+  **geolocation**, **user agent**, **dark/light**, or **viewport** conditions.
+- **Typical scenario:** “Why does this break on slow 3G?” or “Does dark mode
+  break contrast?”
+
+### `resize_page`
+
+- **Use when:** You need an exact **content** width/height (layout breakpoints,
+  responsive bugs).
+
+---
+
+## Debugging (DOM, visuals, scripts)
+
+### `take_snapshot`
+
+- **Use when:** You need **structure, roles, names, and uids** for automation or
+  reasoning about the page.
+- **Prefer over** `take_screenshot` for “what can I click?” questions.
+
+### `take_screenshot`
+
+- **Use when:** You need **pixels** (visual regression, layout proof, sharing
+  with a human). Optional **element `uid`**, **`fullPage`**, or **`filePath`**.
+
+### `evaluate_script`
+
+- **Use when:** Reading **`window` state**, calling page APIs, or extracting
+  data **as JSON**. Pass element **`uid`s** as **`args`** when the script
+  should receive DOM nodes.
+- **Not for:** Long arbitrary scripts without a return value—keep functions
+  **JSON-serializable**.
+
+### `list_console_messages` / `get_console_message`
+
+- **Use when:** Investigating **errors, warnings, logs**, or **DevTools issues**
+  after navigation or interaction.
+- **Flow:** List to get **`msgid`**, then fetch full detail for one message.
+
+### `lighthouse_audit`
+
+- **Use when:** You want **a11y, SEO, best-practices** scores and reports
+  (HTML/JSON). **Does not** replace performance tracing for load timelines.
+- **Performance:** Use **`performance_start_trace`** / **`performance_stop_trace`**.
+
+### Style, layout, and comparison tools
+
+| Tool                                | Use when                                                                          |
+| ----------------------------------- | --------------------------------------------------------------------------------- |
+| **`get_computed_styles`**           | Inspect **resolved CSS** for one node; optional **rule origins**.                 |
+| **`get_computed_styles_batch`**     | Same for **many uids** (design-system parity checks).                             |
+| **`get_box_model`**                 | **Padding/margin/content** quads and geometry debugging.                          |
+| **`get_visibility`**                | “Why is this invisible?” (**display**, **opacity**, off-screen, etc.).            |
+| **`diff_computed_styles`**          | **Side-by-side** two elements (A vs B) on the **same** page.                      |
+| **`save_computed_styles_snapshot`** | **Baseline** captured styles + meta for later comparison.                         |
+| **`diff_computed_styles_snapshot`** | Compare **live** node to a **saved** baseline; use **`domPath`** if uids drifted. |
+| **`highlight_elements_for_styles`** | Draw **DevTools overlays** and return **border quads** for external diagrams.     |
+
+**Typical comparison flow:** `take_snapshot` → `save_computed_styles_snapshot`
+→ change URL or code → `take_snapshot` → `diff_computed_styles_snapshot`.
+
+### `screencast_start` / `screencast_stop` _(experimental)_
+
+- **Use when:** You need a **video** repro (MP4). Requires **ffmpeg** on PATH.
+
+---
+
+## Network
+
+### `list_network_requests`
+
+- **Use when:** Seeing **what loaded**, **failed**, or **order/timing** of
+  requests since navigation. Filter by **resource type** or paginate.
+
+### `get_network_request`
+
+- **Use when:** Inspecting **headers, bodies, status** for one request.
+  Omit **`reqid`** to use the row **selected in the DevTools Network panel**.
+- **Tip:** Save large bodies with **`requestFilePath`** / **`responseFilePath`**.
+
+---
+
+## Performance and memory
+
+### `performance_start_trace` / `performance_stop_trace`
+
+- **Use when:** Diagnosing **load performance**, **main-thread jank**,
+  **LCP/INP/CLS**, or sharing a **trace** file.
+- **Note:** Default flow reloads the page; navigate first if **`reload`** is
+  used as intended.
+
+### `performance_analyze_insight`
+
+- **Use when:** A trace is done and you need **deeper detail** on one
+  **insight** (ids/names come from the trace summary).
+
+### `take_memory_snapshot`
+
+- **Use when:** **Heap leaks** or retaining paths; produces a **`.heapsnapshot`**
+  for Chrome DevTools Memory panel.
+
+---
+
+## Extensions _(experimental)_
+
+### `install_extension` / `uninstall_extension` / `list_extensions` / `reload_extension`
+
+- **Use when:** Testing **unpacked** extensions or automating extension
+  lifecycle during E2E.
+
+### `trigger_extension_action`
+
+- **Use when:** Clicking the extension **toolbar action** programmatically.
+
+---
+
+## In-page tools _(experimental)_
+
+Pages can expose **`window.__dtmcp`** tools (schemas defined by the app).
+
+### `list_in_page_tools`
+
+- **Use when:** The app under test registers **custom diagnostics** (feature
+  flags, store state, etc.).
+
+### `execute_in_page_tool`
+
+- **Use when:** Calling those tools with **JSON `params`**; **`{ "uid": "…" }`**
+  in params is resolved to a real element.
+
+---
+
+## Slim mode (`--slim`)
+
+For minimal deployments, the server exposes only:
+
+| Tool             | Role                                |
+| ---------------- | ----------------------------------- |
+| **`screenshot`** | Viewport PNG to a temp path         |
+| **`navigate`**   | `goto` a URL                        |
+| **`evaluate`**   | Run a script string; result as text |
+
+Use full mode for **network, console, performance, styles, and snapshot-based
+automation**.
+
+---
+
+## Choosing tools vs generic web search
+
+- **Prefer this MCP** when the task needs **ground truth** from a real browser:
+  computed styles, traces, network waterfalls, console stacks, or reproducible
+  clicks tied to the a11y tree.
+- **Prefer crawling/search** for **documentation or third-party content** you
+  are not loading in the instrumented Chrome instance.
+
+---
+
+## See also
+
+- [Tool reference](./tool-reference.md) — full schemas
+- [Slim tool reference](./slim-tool-reference.md)
+- [Troubleshooting](./troubleshooting.md)
+- [CLI options](../README.md) — flags that enable experimental categories
diff --git a/docs/slim-tool-reference.md b/docs/slim-tool-reference.md
index b149cc0a5..a9c3422a8 100644
--- a/docs/slim-tool-reference.md
+++ b/docs/slim-tool-reference.md
@@ -1,6 +1,6 @@
 <!-- AUTO GENERATED DO NOT EDIT - run 'npm run gen' to update-->
 
-# Chrome DevTools MCP Slim Tool Reference (~359 cl100k_base tokens)
+# Chrome DevTools MCP Slim Tool Reference (~391 cl100k_base tokens)
 
 - **[Navigation automation](#navigation-automation)** (1 tools)
   - [`navigate`](#navigate)
@@ -12,7 +12,7 @@
 
 ### `navigate`
 
-**Description:** Loads a URL
+**Description:** [`Navigate`](#navigate) the selected tab to url (--slim; accepts beforeunload).
 
 **Parameters:**
 
@@ -24,7 +24,7 @@
 
 ### `evaluate`
 
-**Description:** Evaluates a JavaScript script
+**Description:** [`Evaluate`](#evaluate) a script string in page context; returns text/JSON (--slim).
 
 **Parameters:**
 
@@ -34,7 +34,7 @@
 
 ### `screenshot`
 
-**Description:** Takes a [`screenshot`](#screenshot)
+**Description:** Viewport PNG saved to a temp path (--slim mode; minimal footprint).
 
 **Parameters:** None
 
diff --git a/docs/tool-reference.md b/docs/tool-reference.md
index b09307da8..d6091479a 100644
--- a/docs/tool-reference.md
+++ b/docs/tool-reference.md
@@ -1,6 +1,6 @@
 <!-- AUTO GENERATED DO NOT EDIT - run 'npm run gen' to update-->
 
-# Chrome DevTools MCP Tool Reference (~6951 cl100k_base tokens)
+# Chrome DevTools MCP Tool Reference (~8805 cl100k_base tokens)
 
 - **[Input automation](#input-automation)** (9 tools)
   - [`click`](#click)
@@ -30,11 +30,19 @@
 - **[Network](#network)** (2 tools)
   - [`get_network_request`](#get_network_request)
   - [`list_network_requests`](#list_network_requests)
-- **[Debugging](#debugging)** (6 tools)
+- **[Debugging](#debugging)** (14 tools)
+  - [`diff_computed_styles`](#diff_computed_styles)
+  - [`diff_computed_styles_snapshot`](#diff_computed_styles_snapshot)
   - [`evaluate_script`](#evaluate_script)
+  - [`get_box_model`](#get_box_model)
+  - [`get_computed_styles`](#get_computed_styles)
+  - [`get_computed_styles_batch`](#get_computed_styles_batch)
   - [`get_console_message`](#get_console_message)
+  - [`get_visibility`](#get_visibility)
+  - [`highlight_elements_for_styles`](#highlight_elements_for_styles)
   - [`lighthouse_audit`](#lighthouse_audit)
   - [`list_console_messages`](#list_console_messages)
+  - [`save_computed_styles_snapshot`](#save_computed_styles_snapshot)
   - [`take_screenshot`](#take_screenshot)
   - [`take_snapshot`](#take_snapshot)
 
@@ -42,7 +50,7 @@
 
 ### `click`
 
-**Description:** Clicks on the provided element
+**Description:** Perform a primary (or double) [`click`](#click) on an element identified by snapshot uid. Prefer this over guessing selectors when automating from [`take_snapshot`](#take_snapshot).
 
 **Parameters:**
 
@@ -54,7 +62,7 @@
 
 ### `drag`
 
-**Description:** [`Drag`](#drag) an element onto another element
+**Description:** [`Drag`](#drag) from_uid onto to_uid for drop targets, reorder lists, or file-like interactions modeled as [`drag`](#drag)-and-drop.
 
 **Parameters:**
 
@@ -66,7 +74,7 @@
 
 ### `fill`
 
-**Description:** Type text into an input, text area or select an option from a &lt;select&gt; element.
+**Description:** Set value on inputs, textareas, or select/combobox options from snapshot uid. Prefer over [`type_text`](#type_text) when filling whole fields.
 
 **Parameters:**
 
@@ -78,7 +86,7 @@
 
 ### `fill_form`
 
-**Description:** [`Fill`](#fill) out multiple form elements at once
+**Description:** Batch-[`fill`](#fill) many {uid, value} pairs in one call for multi-field forms.
 
 **Parameters:**
 
@@ -89,7 +97,7 @@
 
 ### `handle_dialog`
 
-**Description:** If a browser dialog was opened, use this command to handle it
+**Description:** Accept or dismiss the current alert/confirm/prompt; optional promptText for prompt().
 
 **Parameters:**
 
@@ -100,7 +108,7 @@
 
 ### `hover`
 
-**Description:** [`Hover`](#hover) over the provided element
+**Description:** Move the pointer over a uid so [`hover`](#hover)-only UI (menus, tooltips) appears before another action.
 
 **Parameters:**
 
@@ -111,7 +119,7 @@
 
 ### `press_key`
 
-**Description:** Press a key or key combination. Use this when other input methods like [`fill`](#fill)() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).
+**Description:** Press a key chord (e.g. Control+R, Escape). Use for shortcuts or when [`fill`](#fill)/[`type_text`](#type_text) cannot model the interaction.
 
 **Parameters:**
 
@@ -122,7 +130,7 @@
 
 ### `type_text`
 
-**Description:** Type text using keyboard into a previously focused input
+**Description:** Send keystrokes to the focused element; optional submitKey (e.g. Enter). Use after [`click`](#click)/[`fill`](#fill) when key-by-key input matters.
 
 **Parameters:**
 
@@ -133,7 +141,7 @@
 
 ### `upload_file`
 
-**Description:** Upload a file through a provided element.
+**Description:** Attach a local file path to a file input or an element that opens a file chooser.
 
 **Parameters:**
 
@@ -147,7 +155,7 @@
 
 ### `close_page`
 
-**Description:** Closes the page by its index. The last open page cannot be closed.
+**Description:** Close a tab by pageId from [`list_pages`](#list_pages). The last tab cannot be closed.
 
 **Parameters:**
 
@@ -157,7 +165,7 @@
 
 ### `list_pages`
 
-**Description:** Get a list of pages open in the browser.
+**Description:** List browser tabs with ids and URLs for [`select_page`](#select_page) / [`close_page`](#close_page).
 
 **Parameters:** None
 
@@ -165,7 +173,7 @@
 
 ### `navigate_page`
 
-**Description:** Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.
+**Description:** Navigate: url, back, forward, or reload; optional cache bypass, per-navigation init script, beforeunload handling.
 
 **Parameters:**
 
@@ -180,7 +188,7 @@
 
 ### `new_page`
 
-**Description:** Open a new tab and load a URL. Use project URL if not specified otherwise.
+**Description:** Open a tab and goto url; optional background or isolatedContext (separate storage). Use for parallel sessions.
 
 **Parameters:**
 
@@ -193,7 +201,7 @@
 
 ### `select_page`
 
-**Description:** Select a page as a context for future tool calls.
+**Description:** Make pageId the active tab for following tools (required when multiple tabs are open).
 
 **Parameters:**
 
@@ -204,7 +212,7 @@
 
 ### `wait_for`
 
-**Description:** Wait for the specified text to appear on the selected page.
+**Description:** Wait until any of the given strings appears (async rendering, SPA transitions).
 
 **Parameters:**
 
@@ -217,7 +225,7 @@
 
 ### `emulate`
 
-**Description:** Emulates various features on the selected page.
+**Description:** Apply one-shot emulation: throttling, CPU slowdown, geolocation, UA, color scheme, device viewport string.
 
 **Parameters:**
 
@@ -232,7 +240,7 @@
 
 ### `resize_page`
 
-**Description:** Resizes the selected page's window so that the page has specified dimension
+**Description:** Resize the window so the page content matches width x height (responsive layout debugging).
 
 **Parameters:**
 
@@ -245,7 +253,7 @@
 
 ### `performance_analyze_insight`
 
-**Description:** Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.
+**Description:** Expand one insight from the last trace (insightSetId + insightName from trace output).
 
 **Parameters:**
 
@@ -256,7 +264,7 @@
 
 ### `performance_start_trace`
 
-**Description:** Start a performance trace on the selected webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.
+**Description:** Record a DevTools performance trace (reload optional). Use for load speed, main-thread jank, and Core Web Vitals—not Lighthouse scores.
 
 **Parameters:**
 
@@ -268,7 +276,7 @@
 
 ### `performance_stop_trace`
 
-**Description:** Stop the active performance trace recording on the selected webpage.
+**Description:** Stop tracing and return trace summary; optional filePath for raw trace JSON (.json or .gz).
 
 **Parameters:**
 
@@ -278,7 +286,7 @@
 
 ### `take_memory_snapshot`
 
-**Description:** Capture a heap snapshot of the currently selected page. Use to analyze the memory distribution of JavaScript objects and debug memory leaks.
+**Description:** Write a .heapsnapshot for the current target; open in Memory panel to find leaks and retainers.
 
 **Parameters:**
 
@@ -290,7 +298,7 @@
 
 ### `get_network_request`
 
-**Description:** Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.
+**Description:** Full request/response for a reqid from [`list_network_requests`](#list_network_requests); omit reqid to use the row selected in the Network panel.
 
 **Parameters:**
 
@@ -302,7 +310,7 @@
 
 ### `list_network_requests`
 
-**Description:** List all requests for the currently selected page since the last navigation.
+**Description:** HTTP/S requests since navigation: URL, status, timing, size. Filter by resource type; paginate large logs.
 
 **Parameters:**
 
@@ -315,10 +323,36 @@
 
 ## Debugging
 
+### `diff_computed_styles`
+
+**Description:** Side-by-side style diff for two uids on the same page; optional geometry compare for layout-affecting changes.
+
+**Parameters:**
+
+- **uidA** (string) **(required)**: First element uid
+- **uidB** (string) **(required)**: Second element uid
+- **compareGeometry** (boolean) _(optional)_: If true, compare border-box geometry and classify effective layout change.
+- **properties** (array) _(optional)_: Optional filter list
+
+---
+
+### `diff_computed_styles_snapshot`
+
+**Description:** Compare live uid to [`save_computed_styles_snapshot`](#save_computed_styles_snapshot) baseline; domPath when uids differ between loads.
+
+**Parameters:**
+
+- **name** (string) **(required)**: Snapshot name
+- **uid** (string) **(required)**: Element uid for the live node (from current snapshot)
+- **compareGeometry** (boolean) _(optional)_: Compare border-box rects to detect effective layout change.
+- **domPath** (string) _(optional)_: If baseline uid differs, match saved element by domPath from v1 snapshot.
+- **properties** (array) _(optional)_: Optional filter list
+
+---
+
 ### `evaluate_script`
 
-**Description:** Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON,
-so returned values have to be JSON-serializable.
+**Description:** Run an async/sync function body in the page; result JSON-serializable. Pass snapshot element uids as args to receive DOM handles. For extensions, optional serviceWorkerId targets the worker.
 
 **Parameters:**
 
@@ -336,9 +370,42 @@ so returned values have to be JSON-serializable.
 
 ---
 
+### `get_box_model`
+
+**Description:** CDP box model quads and rects for layout misalignment, overflow, and offset debugging.
+
+**Parameters:**
+
+- **uid** (string) **(required)**: The uid of an element on the page from the page content snapshot
+
+---
+
+### `get_computed_styles`
+
+**Description:** Resolved computed styles for one uid; optional property filter and winning-rule hints (includeSources). Prefer over scraping styles in [`evaluate_script`](#evaluate_script).
+
+**Parameters:**
+
+- **uid** (string) **(required)**: The uid of an element on the page from the page content snapshot
+- **includeSources** (boolean) _(optional)_: If true, include best-effort winning rule origins
+- **properties** (array) _(optional)_: Optional filter list
+
+---
+
+### `get_computed_styles_batch`
+
+**Description:** Batch computed styles map keyed by uid—use for design tokens or multi-node parity checks.
+
+**Parameters:**
+
+- **uids** (array) **(required)**: The uids of elements on the page from the page content snapshot
+- **properties** (array) _(optional)_: Optional filter list
+
+---
+
 ### `get_console_message`
 
-**Description:** Gets a console message by its ID. You can get all messages by calling [`list_console_messages`](#list_console_messages).
+**Description:** Fetch one console entry by msgid from [`list_console_messages`](#list_console_messages) (stack, args, issue details).
 
 **Parameters:**
 
@@ -346,9 +413,29 @@ so returned values have to be JSON-serializable.
 
 ---
 
+### `get_visibility`
+
+**Description:** Explain why an element is invisible (display, opacity, zero size, off-viewport, clip-path).
+
+**Parameters:**
+
+- **uid** (string) **(required)**: The uid of an element on the page from the page content snapshot
+
+---
+
+### `highlight_elements_for_styles`
+
+**Description:** Highlight border quads in DevTools and return coordinates for screenshot overlays or docs.
+
+**Parameters:**
+
+- **uids** (array) **(required)**: Element uids from the current page snapshot
+
+---
+
 ### `lighthouse_audit`
 
-**Description:** Get Lighthouse score and reports for accessibility, SEO and best practices. This excludes performance. For performance audits, run [`performance_start_trace`](#performance_start_trace)
+**Description:** Lighthouse a11y/SEO/best-practices only (HTML+JSON reports). For load/runtime timelines use [`performance_start_trace`](#performance_start_trace).
 
 **Parameters:**
 
@@ -360,7 +447,7 @@ so returned values have to be JSON-serializable.
 
 ### `list_console_messages`
 
-**Description:** List all console messages for the currently selected page since the last navigation.
+**Description:** Paginated console logs (and issues) since navigation; filter by type or include prior navigations.
 
 **Parameters:**
 
@@ -371,9 +458,21 @@ so returned values have to be JSON-serializable.
 
 ---
 
+### `save_computed_styles_snapshot`
+
+**Description:** Store baseline computed styles + domPath/meta under a name for cross-navigation regression checks.
+
+**Parameters:**
+
+- **name** (string) **(required)**: Snapshot name
+- **uids** (array) **(required)**: The uids of elements on the page from the page content snapshot
+- **properties** (array) _(optional)_: Optional filter list
+
+---
+
 ### `take_screenshot`
 
-**Description:** Take a screenshot of the page or element.
+**Description:** Capture PNG/JPEG/WebP of viewport, full page, or a uid element; use when pixels matter (layout, regressions), not for DOM structure.
 
 **Parameters:**
 
@@ -387,9 +486,7 @@ so returned values have to be JSON-serializable.
 
 ### `take_snapshot`
 
-**Description:** Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique
-identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected
-in the DevTools Elements panel (if any).
+**Description:** Accessibility tree with stable uids for automation. Always use the latest snapshot after DOM changes. Prefer over screenshot for structure; reflects Elements panel selection when set.
 
 **Parameters:**
 
diff --git a/package.json b/package.json
index 2925e659b..4d3f259cf 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "update-tool-call-metrics": "node --experimental-strip-types scripts/update_tool_call_metrics.ts",
     "verify-npm-package": "node scripts/verify-npm-package.mjs",
     "eval": "npm run build && node --experimental-strip-types scripts/eval_gemini.ts",
-    "count-tokens": "node --experimental-strip-types scripts/count_tokens.ts"
+    "count-tokens": "node --experimental-strip-types scripts/count_tokens.ts",
+    "build:e2e-comparison-pages": "npm run build && node build/tests/e2e/comparison/generate-fixtures.js"
   },
   "files": [
     "build/src",
diff --git a/scripts/run-e2e-styles.js b/scripts/run-e2e-styles.js
new file mode 100644
index 000000000..2e8aa6e2e
--- /dev/null
+++ b/scripts/run-e2e-styles.js
@@ -0,0 +1,206 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Client} from '@modelcontextprotocol/sdk/client/index.js';
+import {StdioClientTransport} from '@modelcontextprotocol/sdk/client/stdio.js';
+
+function extractJson(text) {
+  const m = text.match(/```json\s*([\s\S]*?)\s*```/);
+  if (!m) {
+    throw new Error('No JSON block found');
+  }
+  return JSON.parse(m[1]);
+}
+
+function findUidFromSnapshot(text, includes) {
+  const idx = text.indexOf('## Page content');
+  const body = idx >= 0 ? text.slice(idx) : text;
+  for (const line of body.split('\n')) {
+    if (line.includes('uid=') && line.includes(includes)) {
+      const m = line.match(/uid=(\d+_\d+)/);
+      if (m) {
+        return m[1];
+      }
+    }
+  }
+  throw new Error('UID not found for: ' + includes);
+}
+
+async function main() {
+  const chromePath =
+    process.env.CHROME_PATH ||
+    'C\\\x3a\\\x5cProgram Files\\\x5cGoogle\\\x5cChrome\\\x5cApplication\\\x5cchrome.exe'
+      .replace(/\\\\/g, '\\\\') // keep literal backslashes
+      .replace(/\x3a/g, ':')
+      .replace(/\x5c/g, '\\');
+
+  const transport = new StdioClientTransport({
+    command: 'node',
+    args: [
+      'build/src/index.js',
+      '--headless',
+      '--isolated',
+      '--executable-path',
+      chromePath,
+    ],
+  });
+
+  const client = new Client(
+    {name: 'manual-e2e', version: '1.0.0'},
+    {capabilities: {}},
+  );
+  await client.connect(transport);
+
+  async function call(name, args = {}) {
+    const res = await client.callTool({name, arguments: args});
+    if (res.isError) {
+      throw new Error(`${name} error: ${res.content?.[0]?.text || ''}`);
+    }
+    return res;
+  }
+
+  try {
+    // 1) Navigate and wait
+    await call('navigate_page', {url: 'https://example.com'});
+    await call('wait_for', {text: 'Example Domain'});
+
+    // 2) Inject deterministic DOM/CSS
+    // Intentionally omitted to satisfy eslint (no DOM in Node here).
+
+    // 3) Snapshot for UIDs
+    const snap = await call('take_snapshot');
+    const snapText = snap.content?.[0]?.text || '';
+    const uidBox = findUidFromSnapshot(snapText, 'button "box"');
+    const uidIcon = findUidFromSnapshot(snapText, 'img "icon"');
+
+    // 4) Computed styles with origins
+    const csBox = await call('get_computed_styles', {
+      uid: uidBox,
+      properties: ['display', 'color', 'width', 'height'],
+      includeSources: true,
+    });
+    const boxJson = extractJson(csBox.content?.[0]?.text || '');
+    if (boxJson.computed.display !== 'block') {
+      throw new Error('box display');
+    }
+    if (!boxJson.computed.color?.startsWith('rgb(0, 0, 255')) {
+      throw new Error('box color');
+    }
+
+    const csIcon = await call('get_computed_styles', {
+      uid: uidIcon,
+      properties: ['display', 'color'],
+      includeSources: true,
+    });
+    const iconJson = extractJson(csIcon.content?.[0]?.text || '');
+    if (iconJson.computed.display !== 'inline-block') {
+      throw new Error('icon display');
+    }
+    if (!iconJson.computed.color?.startsWith('rgb(0, 128, 0')) {
+      throw new Error('icon color');
+    }
+
+    // 5) Box model
+    const bm = await call('get_box_model', {uid: uidBox});
+    const bmJson = extractJson(bm.content?.[0]?.text || '');
+    if (!(bmJson.borderRect.width >= bmJson.contentRect.width)) {
+      throw new Error('box model width');
+    }
+
+    // 6) Visibility
+    const vis1 = await call('get_visibility', {uid: uidBox});
+    const vis1Json = extractJson(vis1.content?.[0]?.text || '');
+    if (!vis1Json.isVisible) {
+      throw new Error('vis1');
+    }
+
+    // 7) Batch
+    const batch = await call('get_computed_styles_batch', {
+      uids: [uidBox, uidIcon],
+      properties: ['display', 'color'],
+    });
+    const batchJson = extractJson(batch.content?.[0]?.text || '');
+    if (batchJson[uidBox].display !== 'block') {
+      throw new Error('batch box');
+    }
+    if (batchJson[uidIcon].display !== 'inline-block') {
+      throw new Error('batch icon');
+    }
+
+    // 8) Diff A vs B
+    const diff = await call('diff_computed_styles', {
+      uidA: uidBox,
+      uidB: uidIcon,
+      properties: ['display', 'color'],
+    });
+    const diffJson = extractJson(diff.content?.[0]?.text || '');
+    const foundDisplay = diffJson.find(d => d.property === 'display');
+    if (!foundDisplay) {
+      throw new Error('diff display missing');
+    }
+
+    // 9) Save snapshot
+    await call('save_computed_styles_snapshot', {
+      name: 'snap1',
+      uids: [uidBox, uidIcon],
+      properties: ['display', 'color', 'width', 'height'],
+    });
+
+    // 10) Change styles
+    await call('evaluate_script', {
+      function: String(el => {
+        el.style.display = 'inline';
+        el.style.color = 'rgb(200,0,0)';
+        el.style.width = '44px';
+        return true;
+      }),
+      args: [{uid: uidBox}],
+    });
+
+    // 11) Diff snapshot vs current
+    const sdiff = await call('diff_computed_styles_snapshot', {
+      name: 'snap1',
+      uid: uidBox,
+      properties: ['display', 'color', 'width'],
+    });
+    const sdiffJson = extractJson(sdiff.content?.[0]?.text || '');
+    const dDisplay = sdiffJson.find(d => d.property === 'display');
+    if (
+      !(dDisplay && dDisplay.before === 'block' && dDisplay.after === 'inline')
+    ) {
+      throw new Error('snapshot diff display');
+    }
+
+    // 12) Visibility reasons
+    await call('evaluate_script', {
+      function: String(el => {
+        el.style.display = 'none';
+        return true;
+      }),
+      args: [{uid: uidBox}],
+    });
+    const vis2 = await call('get_visibility', {uid: uidBox});
+    const vis2Json = extractJson(vis2.content?.[0]?.text || '');
+    if (
+      !(
+        vis2Json.isVisible === false &&
+        vis2Json.reasons.includes('display:none')
+      )
+    ) {
+      throw new Error('vis2');
+    }
+
+    console.log('Manual e2e styles: OK');
+  } finally {
+    await client.close();
+  }
+}
+
+// Run
+main().catch(err => {
+  console.error(err?.stack || String(err));
+  process.exit(1);
+});
diff --git a/scripts/test.mjs b/scripts/test.mjs
index 997b4759a..d3cab3f96 100644
--- a/scripts/test.mjs
+++ b/scripts/test.mjs
@@ -16,7 +16,15 @@ const args = process.argv.slice(2);
 const userArgs = args.filter(arg => !arg.startsWith('-'));
 const flags = args.filter(arg => arg.startsWith('-'));
 
-const files = [];
+/** Default per-root-test limit (fast CI failures). */
+const DEFAULT_TEST_TIMEOUT_MS = Number(
+  process.env['CHROME_DEVTOOLS_MCP_TEST_TIMEOUT_MS'] ?? 60_000,
+);
+
+/** Root timeout for heavy E2E files (100+ MCP launches; lighthouse). */
+const LONG_TEST_TIMEOUT_MS = Number(
+  process.env['CHROME_DEVTOOLS_MCP_LONG_TEST_TIMEOUT_MS'] ?? 900_000,
+);
 
 let shouldRetry = false;
 const retryIndex = flags.indexOf('--retry');
@@ -25,59 +33,65 @@ if (retryIndex !== -1) {
   flags.splice(retryIndex, 1);
 }
 
-if (userArgs.length > 0) {
-  for (const arg of userArgs) {
-    // Map .ts files to build/ .js files
-    let testPath = arg;
-    if (testPath.endsWith('.ts')) {
-      testPath = testPath.replace(/\.ts$/, '.js');
-      if (!testPath.startsWith('build/')) {
-        testPath = path.join('build', testPath);
-      }
-    }
-    files.push(testPath);
+/**
+ * Under build/tests/e2e/comparison/, the root test spans many subtests or
+ * long lighthouse work; a 60s root limit cancels the file mid-run.
+ */
+function isLongE2eComparisonFile(file) {
+  const normalized = file.split(path.sep).join('/');
+  return (
+    normalized.includes('/e2e/comparison/') && normalized.endsWith('.test.js')
+  );
+}
+
+async function globTestJsFiles() {
+  const {glob} = await import('node:fs/promises');
+  const out = [];
+  for await (const tsFile of glob('tests/**/*.test.ts')) {
+    out.push(path.join('build', tsFile.replace(/\.ts$/, '.js')));
   }
-} else {
-  const isNode20 = process.version.startsWith('v20.');
-  if (flags.includes('--test-only')) {
-    if (isNode20) {
-      throw new Error(`--test-only is not supported for Node 20`);
-    }
-    const {glob} = await import('node:fs/promises');
-    for await (const tsFile of glob('tests/**/*.test.ts')) {
-      const content = await readFile(tsFile, 'utf8');
-      if (content.includes('.only(')) {
-        files.push(path.join('build', tsFile.replace(/\.ts$/, '.js')));
-      }
-    }
-    if (files.length === 0) {
-      console.warn('no files contain .only');
-      process.exit(0);
-    }
-  } else if (files.length === 0) {
-    if (isNode20) {
-      files.push('build/tests');
-    } else {
-      files.push('build/tests/**/*.test.js');
-    }
+  return out.sort();
+}
+
+/**
+ * @param {string[]} files
+ * @returns {{ fast: string[]; long: string[] }}
+ */
+function partitionByTimeout(files) {
+  const long = [];
+  const fast = [];
+  for (const f of files) {
+    (isLongE2eComparisonFile(f) ? long : fast).push(f);
   }
+  return {fast, long};
 }
 
-const nodeArgs = [
-  '--import',
-  './build/tests/setup.js',
-  '--no-warnings=ExperimentalWarning',
-  '--test-reporter',
-  (process.env['NODE_TEST_REPORTER'] ?? process.env['CI']) ? 'spec' : 'dot',
-  '--test-force-exit',
-  '--test-concurrency=1',
-  '--test',
-  '--test-timeout=60000',
-  ...flags,
-  ...files,
-];
+function buildNodeArgs(testTimeoutMs, testFiles) {
+  return [
+    '--import',
+    './build/tests/setup.js',
+    '--no-warnings=ExperimentalWarning',
+    '--test-reporter',
+    (process.env['NODE_TEST_REPORTER'] ?? process.env['CI']) ? 'spec' : 'dot',
+    '--test-force-exit',
+    '--test-concurrency=1',
+    '--test',
+    `--test-timeout=${testTimeoutMs}`,
+    ...flags,
+    ...testFiles,
+  ];
+}
 
 function installChrome(version) {
+  if (process.env.PUPPETEER_EXECUTABLE_PATH) {
+    const p = process.env.PUPPETEER_EXECUTABLE_PATH;
+    try {
+      execSync(`test -x "${p}"`);
+      return p;
+    } catch {
+      // fall through to install
+    }
+  }
   try {
     return execSync(
       `npx puppeteer browsers install chrome@${version} --format "{{path}}"`,
@@ -90,11 +104,18 @@ function installChrome(version) {
   }
 }
 
-async function runTests(attempt) {
-  if (attempt > 1) {
-    console.log(`\nRun attempt ${attempt}...\n`);
+async function runNodeTestBatch(testTimeoutMs, testFiles, label) {
+  if (testFiles.length === 0) {
+    return 0;
+  }
+  if (label) {
+    console.error(
+      `\n[test] ${label} (${testFiles.length} file(s), ` +
+        `timeout ${testTimeoutMs}ms)\n`,
+    );
   }
-  return new Promise(resolve => {
+  const nodeArgs = buildNodeArgs(testTimeoutMs, testFiles);
+  return await new Promise(resolve => {
     const child = spawn('node', nodeArgs, {
       stdio: 'inherit',
       env: {
@@ -104,24 +125,98 @@ async function runTests(attempt) {
         CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS: true,
       },
     });
-
     child.on('close', code => {
-      resolve(code);
+      resolve(code ?? 1);
     });
   });
 }
 
+async function resolveTestFiles() {
+  if (userArgs.length > 0) {
+    const files = [];
+    for (const arg of userArgs) {
+      let testPath = arg;
+      if (testPath.endsWith('.ts')) {
+        testPath = testPath.replace(/\.ts$/, '.js');
+        if (!testPath.startsWith('build/')) {
+          testPath = path.join('build', testPath);
+        }
+      }
+      files.push(testPath);
+    }
+    return {mode: 'explicit', files};
+  }
+
+  const isNode20 = process.version.startsWith('v20.');
+  if (flags.includes('--test-only')) {
+    if (isNode20) {
+      throw new Error(`--test-only is not supported for Node 20`);
+    }
+    const {glob} = await import('node:fs/promises');
+    const files = [];
+    for await (const tsFile of glob('tests/**/*.test.ts')) {
+      const content = await readFile(tsFile, 'utf8');
+      if (content.includes('.only(')) {
+        files.push(path.join('build', tsFile.replace(/\.ts$/, '.js')));
+      }
+    }
+    return {mode: 'only', files};
+  }
+
+  const files = await globTestJsFiles();
+  return {mode: 'default', files};
+}
+
+async function runFullSuite() {
+  const resolved = await resolveTestFiles();
+  const {files, mode} = resolved;
+
+  if (mode === 'only' && files.length === 0) {
+    console.warn('no files contain .only');
+    return 0;
+  }
+
+  const usePartition = mode === 'default';
+  const split = usePartition
+    ? partitionByTimeout(files)
+    : {fast: files, long: []};
+  const anyLong = files.some(isLongE2eComparisonFile);
+
+  if (usePartition) {
+    const c1 = await runNodeTestBatch(
+      DEFAULT_TEST_TIMEOUT_MS,
+      split.fast,
+      'default timeout',
+    );
+    if (c1 !== 0) {
+      return c1;
+    }
+    return await runNodeTestBatch(
+      LONG_TEST_TIMEOUT_MS,
+      split.long,
+      'extended timeout (e2e/comparison)',
+    );
+  }
+
+  const timeout = anyLong ? LONG_TEST_TIMEOUT_MS : DEFAULT_TEST_TIMEOUT_MS;
+  return await runNodeTestBatch(timeout, files, '');
+}
+
 const chromePath = installChrome('146.0.7680.31');
 process.env.CHROME_M146_EXECUTABLE_PATH = chromePath;
+process.env.PUPPETEER_EXECUTABLE_PATH = chromePath;
 
 const maxAttempts = shouldRetry ? 3 : 1;
 let exitCode = 1;
 
 for (let i = 1; i <= maxAttempts; i++) {
-  exitCode = await runTests(i);
+  if (i > 1) {
+    console.log(`\nRun attempt ${i}...\n`);
+  }
+  exitCode = await runFullSuite();
   if (exitCode === 0) {
     break;
   }
 }
 
-process.exit(exitCode ?? 1);
+process.exit(exitCode);
diff --git a/src/DevToolsConnectionAdapter.ts b/src/DevToolsConnectionAdapter.ts
index e1f5d0bfb..f67fac2f3 100644
--- a/src/DevToolsConnectionAdapter.ts
+++ b/src/DevToolsConnectionAdapter.ts
@@ -88,6 +88,7 @@ export class PuppeteerDevToolsConnection
     const handler = this.#sessionEventHandlers.get(session.id());
     if (handler) {
       session.off('*', handler);
+      this.#sessionEventHandlers.delete(session.id());
     }
   }
 
diff --git a/src/McpContext.ts b/src/McpContext.ts
index 32b7413e6..9b8a718cd 100644
--- a/src/McpContext.ts
+++ b/src/McpContext.ts
@@ -22,6 +22,7 @@ import type {
   BrowserContext,
   ConsoleMessage,
   Debugger,
+  ElementHandle,
   HTTPRequest,
   Page,
   ScreenRecorder,
@@ -92,6 +93,8 @@ export class McpContext implements Context {
 
   #nextSnapshotId = 1;
   #traceResults: TraceResult[] = [];
+  #cssDomainEnabled = new WeakSet<Page>();
+  #domDomainEnabled = new WeakSet<Page>();
 
   #locatorClass: typeof Locator;
   #options: McpContextOptions;
@@ -905,4 +908,63 @@ export class McpContext implements Context {
   getExtension(id: string): InstalledExtension | undefined {
     return this.#extensionRegistry.getById(id);
   }
+
+  async ensureCssDomainEnabledForPage(page: Page): Promise<void> {
+    if (this.#cssDomainEnabled.has(page)) {
+      return;
+    }
+    // @ts-expect-error internal API
+    const client = page._client();
+    await client.send('CSS.enable');
+    this.#cssDomainEnabled.add(page);
+  }
+
+  async ensureDomDomainEnabledForPage(page: Page): Promise<void> {
+    if (this.#domDomainEnabled.has(page)) {
+      return;
+    }
+    // @ts-expect-error internal API
+    const client = page._client();
+    await client.send('DOM.enable');
+    try {
+      await client.send('DOM.getDocument', {depth: 1});
+    } catch {
+      // ignore
+    }
+    this.#domDomainEnabled.add(page);
+  }
+
+  async getNodeIdFromHandle(
+    handle: ElementHandle<Element>,
+    page: Page,
+  ): Promise<number> {
+    await this.ensureDomDomainEnabledForPage(page);
+    // @ts-expect-error internal API
+    const client = page._client();
+    // Access the underlying RemoteObject id
+    const objectId: string | undefined = handle.remoteObject().objectId;
+    if (!objectId) {
+      throw new Error('Unable to resolve CDP objectId for element handle');
+    }
+    try {
+      const {nodeId} = await client.send('DOM.requestNode', {objectId});
+      return nodeId as number;
+    } catch {
+      const {node} = await client.send('DOM.describeNode', {objectId});
+      if (node?.nodeId) {
+        return node.nodeId as number;
+      }
+      if (node?.backendNodeId) {
+        const {nodeIds} = await client.send(
+          'DOM.pushNodesByBackendIdsToFrontend',
+          {backendNodeIds: [node.backendNodeId]},
+        );
+        const first = (nodeIds as number[])[0];
+        if (first) {
+          return first;
+        }
+      }
+      throw new Error('Unable to resolve DOM.NodeId for element');
+    }
+  }
 }
diff --git a/src/McpResponse.ts b/src/McpResponse.ts
index 719c04626..7d787e9c6 100644
--- a/src/McpResponse.ts
+++ b/src/McpResponse.ts
@@ -98,14 +98,18 @@ async function getToolGroup(
 ): Promise<ToolGroup<ToolDefinition> | undefined> {
   // Check if there is a `devtoolstooldiscovery` event listener
   const windowHandle = await page.pptrPage.evaluateHandle(() => window);
-  // @ts-expect-error internal API
-  const client = page.pptrPage._client();
-  const {listeners}: {listeners: Protocol.DOMDebugger.EventListener[]} =
-    await client.send('DOMDebugger.getEventListeners', {
-      objectId: windowHandle.remoteObject().objectId,
-    });
-  if (listeners.find(l => l.type === 'devtoolstooldiscovery') === undefined) {
-    return;
+  try {
+    // @ts-expect-error internal API
+    const client = page.pptrPage._client();
+    const {listeners}: {listeners: Protocol.DOMDebugger.EventListener[]} =
+      await client.send('DOMDebugger.getEventListeners', {
+        objectId: windowHandle.remoteObject().objectId,
+      });
+    if (listeners.find(l => l.type === 'devtoolstooldiscovery') === undefined) {
+      return;
+    }
+  } finally {
+    await windowHandle.dispose().catch(() => undefined);
   }
 
   const toolGroup = await page.pptrPage.evaluate(() => {
diff --git a/src/WaitForHelper.ts b/src/WaitForHelper.ts
index 2dd0f48c1..9b01a0af7 100644
--- a/src/WaitForHelper.ts
+++ b/src/WaitForHelper.ts
@@ -60,32 +60,50 @@ export class WaitForHelper {
       return domObserver;
     }, this.#stableDomFor);
 
-    this.#abortController.signal.addEventListener('abort', async () => {
-      try {
-        await stableDomObserver.evaluate(observer => {
-          observer.observer.disconnect();
-          observer.resolver.resolve();
-        });
-        await stableDomObserver.dispose();
-      } catch {
-        // Ignored cleanup errors
-      }
-    });
+    this.#abortController.signal.addEventListener(
+      'abort',
+      async () => {
+        try {
+          await stableDomObserver.evaluate(observer => {
+            observer.observer.disconnect();
+            observer.resolver.resolve();
+          });
+        } catch {
+          // Ignored cleanup errors
+        }
+      },
+      {once: true},
+    );
 
-    return Promise.race([
-      stableDomObserver.evaluate(async observer => {
-        return await observer.resolver.promise;
-      }),
-      this.timeout(this.#stableDomTimeout).then(() => {
-        throw new Error('Timeout');
-      }),
-    ]);
+    try {
+      return await Promise.race([
+        stableDomObserver.evaluate(async observer => {
+          return await observer.resolver.promise;
+        }),
+        this.timeout(this.#stableDomTimeout).then(() => {
+          throw new Error('Timeout');
+        }),
+      ]);
+    } finally {
+      await stableDomObserver.dispose().catch(() => undefined);
+    }
   }
 
   async waitForNavigationStarted() {
     // Currently Puppeteer does not have API
     // For when a navigation is about to start
+    const client = this.#page._client();
     const navigationStartedPromise = new Promise<boolean>(resolve => {
+      let settled = false;
+      const settle = (value: boolean) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        client.off('Page.frameStartedNavigating', listener);
+        resolve(value);
+      };
+
       const listener = (event: Protocol.Page.FrameStartedNavigatingEvent) => {
         if (
           [
@@ -94,18 +112,18 @@ export class WaitForHelper {
             'sameDocument',
           ].includes(event.navigationType)
         ) {
-          resolve(false);
+          settle(false);
           return;
         }
-
-        resolve(true);
+        settle(true);
       };
 
-      this.#page._client().on('Page.frameStartedNavigating', listener);
-      this.#abortController.signal.addEventListener('abort', () => {
-        resolve(false);
-        this.#page._client().off('Page.frameStartedNavigating', listener);
-      });
+      client.on('Page.frameStartedNavigating', listener);
+      this.#abortController.signal.addEventListener(
+        'abort',
+        () => settle(false),
+        {once: true},
+      );
     });
 
     return await Promise.race([
@@ -117,10 +135,14 @@ export class WaitForHelper {
   timeout(time: number): Promise<void> {
     return new Promise<void>(res => {
       const id = setTimeout(res, time);
-      this.#abortController.signal.addEventListener('abort', () => {
-        res();
-        clearTimeout(id);
-      });
+      this.#abortController.signal.addEventListener(
+        'abort',
+        () => {
+          res();
+          clearTimeout(id);
+        },
+        {once: true},
+      );
     });
   }
 
diff --git a/src/browser.ts b/src/browser.ts
index 7deea75b4..576d4fdde 100644
--- a/src/browser.ts
+++ b/src/browser.ts
@@ -61,6 +61,7 @@ export async function ensureBrowserConnected(options: {
     targetFilter: makeTargetFilter(enableExtensions),
     defaultViewport: null,
     handleDevToolsAsPage: true,
+    protocolTimeout: 30_000,
   };
 
   let autoConnect = false;
diff --git a/src/formatters/SnapshotFormatter.ts b/src/formatters/SnapshotFormatter.ts
index d118fc171..a357e36d1 100644
--- a/src/formatters/SnapshotFormatter.ts
+++ b/src/formatters/SnapshotFormatter.ts
@@ -14,85 +14,71 @@ export class SnapshotFormatter {
   }
 
   toString(): string {
-    const chunks: string[] = [];
+    const lines: string[] = [];
     const root = this.#snapshot.root;
 
-    // Top-level content of the snapshot.
     if (
       this.#snapshot.verbose &&
       this.#snapshot.hasSelectedElement &&
       !this.#snapshot.selectedElementUid
     ) {
-      chunks.push(`Note: there is a selected element in the DevTools Elements panel but it is not included into the current a11y tree snapshot.
-Get a verbose snapshot to include all elements if you are interested in the selected element.\n\n`);
+      lines.push(
+        `Note: there is a selected element in the DevTools Elements panel but it is not included into the current a11y tree snapshot.`,
+      );
+      lines.push(
+        `Get a verbose snapshot to include all elements if you are interested in the selected element.\n`,
+      );
     }
 
-    chunks.push(this.#formatNode(root, 0));
-    return chunks.join('');
+    this.#formatNodeFlat(root, 0, lines);
+    return lines.join('\n') + '\n';
   }
 
   toJSON(): object {
     return this.#nodeToJSON(this.#snapshot.root);
   }
 
-  #formatNode(node: TextSnapshotNode, depth = 0): string {
-    const chunks: string[] = [];
+  #formatNodeFlat(node: TextSnapshotNode, depth: number, out: string[]): void {
     const attributes = this.#getAttributes(node);
-    const line =
-      ' '.repeat(depth * 2) +
-      attributes.join(' ') +
-      (node.id === this.#snapshot.selectedElementUid
+    const indent = '  '.repeat(depth);
+    const selected =
+      node.id === this.#snapshot.selectedElementUid
         ? ' [selected in the DevTools Elements panel]'
-        : '') +
-      '\n';
-    chunks.push(line);
-
+        : '';
+    out.push(indent + attributes.join(' ') + selected);
     for (const child of node.children) {
-      chunks.push(this.#formatNode(child, depth + 1));
+      this.#formatNodeFlat(child, depth + 1, out);
     }
-    return chunks.join('');
   }
 
   #nodeToJSON(node: TextSnapshotNode): object {
     const rawAttrs = this.#getAttributesMap(node);
-    const children = node.children.map(child => this.#nodeToJSON(child));
-    const result: Record<string, unknown> = structuredClone(rawAttrs);
-    if (children.length > 0) {
-      result.children = children;
+    const result: Record<string, unknown> = {...rawAttrs};
+    if (node.children.length > 0) {
+      result.children = node.children.map(child => this.#nodeToJSON(child));
     }
     return result;
   }
 
-  #getAttributes(serializedAXNodeRoot: TextSnapshotNode): string[] {
-    const attributes = [`uid=${serializedAXNodeRoot.id}`];
+  #getAttributes(node: TextSnapshotNode): string[] {
+    const attributes = [`uid=${node.id}`];
 
-    if (serializedAXNodeRoot.role) {
-      attributes.push(
-        serializedAXNodeRoot.role === 'none'
-          ? 'ignored'
-          : serializedAXNodeRoot.role,
-      );
+    if (node.role) {
+      attributes.push(node.role === 'none' ? 'ignored' : node.role);
     }
-    if (serializedAXNodeRoot.name) {
-      attributes.push(`"${serializedAXNodeRoot.name}"`);
+    if (node.name) {
+      attributes.push(`"${node.name}"`);
     }
 
-    const simpleAttrs = this.#getAttributesMap(
-      serializedAXNodeRoot,
-      /* excludeSpecial */ true,
-    );
-
-    for (const attr of Object.keys(serializedAXNodeRoot).sort()) {
-      if (excludedAttributes.has(attr)) {
-        continue;
-      }
+    const extracted = this.#extractedAttributes(node);
 
+    for (const attr of this.#sortedKeys(node)) {
       const mapped = booleanPropertyMap[attr];
-      if (mapped && simpleAttrs[mapped]) {
+      if (mapped && extracted[mapped]) {
         attributes.push(mapped);
       }
 
-      const val = simpleAttrs[attr];
+      const val = extracted[attr];
       if (val === true) {
         attributes.push(attr);
       } else if (typeof val === 'string' || typeof val === 'number') {
@@ -103,35 +89,35 @@ Get a verbose snapshot to include all elements if you are interested in the sele
     return attributes;
   }
 
-  #getAttributesMap(
-    node: TextSnapshotNode,
-    excludeSpecial = false,
-  ): Record<string, unknown> {
+  #getAttributesMap(node: TextSnapshotNode): Record<string, unknown> {
     const result: Record<string, unknown> = {};
-    if (!excludeSpecial) {
-      result.id = node.id;
-      if (node.role) {
-        result.role = node.role;
-      }
-      if (node.name) {
-        result.name = node.name;
-      }
+    result.id = node.id;
+    if (node.role) {
+      result.role = node.role;
+    }
+    if (node.name) {
+      result.name = node.name;
     }
+    return {...result, ...this.#extractedAttributes(node)};
+  }
 
-    // Re-implementing the exact logic from original function for #getAttributes to be safe:
-    return {
-      ...result,
-      ...this.#extractedAttributes(node),
-    };
+  #sortedKeysCache = new WeakMap<TextSnapshotNode, string[]>();
+
+  #sortedKeys(node: TextSnapshotNode): string[] {
+    let cached = this.#sortedKeysCache.get(node);
+    if (!cached) {
+      cached = Object.keys(node)
+        .filter(k => !excludedAttributes.has(k))
+        .sort();
+      this.#sortedKeysCache.set(node, cached);
+    }
+    return cached;
   }
 
   #extractedAttributes(node: TextSnapshotNode): Record<string, unknown> {
     const result: Record<string, unknown> = {};
 
-    for (const attr of Object.keys(node).sort()) {
-      if (excludedAttributes.has(attr)) {
-        continue;
-      }
+    for (const attr of this.#sortedKeys(node)) {
       const value = (node as unknown as Record<string, unknown>)[attr];
       if (typeof value === 'boolean') {
         if (booleanPropertyMap[attr]) {
diff --git a/src/index.ts b/src/index.ts
index 8fed38b83..ac0dfae56 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -104,6 +104,7 @@ export async function createMcpServer(
           });
 
     if (context?.browser !== browser) {
+      context?.dispose();
       context = await McpContext.from(browser, logger, {
         experimentalDevToolsDebugging: devtools,
         experimentalIncludeAllPages: serverArgs.experimentalIncludeAllPages,
diff --git a/src/tools/ToolDefinition.ts b/src/tools/ToolDefinition.ts
index 8001e18c7..365fdca24 100644
--- a/src/tools/ToolDefinition.ts
+++ b/src/tools/ToolDefinition.ts
@@ -199,6 +199,15 @@ export type Context = Readonly<{
   getExtensionServiceWorkerId(
     extensionServiceWorker: ExtensionServiceWorker,
   ): string | undefined;
+  /** Resolve CDP DOM.NodeId for an element handle via DOM.requestNode. */
+  getNodeIdFromHandle(
+    handle: ElementHandle<Element>,
+    page: Page,
+  ): Promise<number>;
+  /** Ensure the CSS domain is enabled for the given Puppeteer page. */
+  ensureCssDomainEnabledForPage(page: Page): Promise<void>;
+  /** Ensure the DOM domain is enabled for the given Puppeteer page. */
+  ensureDomDomainEnabledForPage(page: Page): Promise<void>;
 }>;
 
 export type ContextPage = Readonly<{
diff --git a/src/tools/console.ts b/src/tools/console.ts
index dd8059bbf..b226a73ad 100644
--- a/src/tools/console.ts
+++ b/src/tools/console.ts
@@ -40,7 +40,8 @@ const FILTERABLE_MESSAGE_TYPES: [
 export const listConsoleMessages = definePageTool({
   name: 'list_console_messages',
   description:
-    'List all console messages for the currently selected page since the last navigation.',
+    'Paginated console logs (and issues) since navigation; filter by type ' +
+    'or include prior navigations.',
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: true,
@@ -88,7 +89,9 @@ export const listConsoleMessages = definePageTool({
 
 export const getConsoleMessage = definePageTool({
   name: 'get_console_message',
-  description: `Gets a console message by its ID. You can get all messages by calling ${listConsoleMessages.name}.`,
+  description:
+    `Fetch one console entry by msgid from ${listConsoleMessages.name} ` +
+    '(stack, args, issue details).',
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: true,
diff --git a/src/tools/emulation.ts b/src/tools/emulation.ts
index c9d0ea859..5a0df13f3 100644
--- a/src/tools/emulation.ts
+++ b/src/tools/emulation.ts
@@ -21,7 +21,9 @@ const throttlingOptions: [string, ...string[]] = [
 
 export const emulate = definePageTool({
   name: 'emulate',
-  description: `Emulates various features on the selected page.`,
+  description:
+    'Apply one-shot emulation: throttling, CPU slowdown, geolocation, UA, ' +
+    'color scheme, device viewport string.',
   annotations: {
     category: ToolCategory.EMULATION,
     readOnlyHint: false,
diff --git a/src/tools/extensions.ts b/src/tools/extensions.ts
index 76cec7fb3..72b43bff3 100644
--- a/src/tools/extensions.ts
+++ b/src/tools/extensions.ts
@@ -13,7 +13,9 @@ const EXTENSIONS_CONDITION = 'experimentalExtensionSupport';
 
 export const installExtension = defineTool({
   name: 'install_extension',
-  description: 'Installs a Chrome extension from the given path.',
+  description:
+    'Load an unpacked extension directory into the browser for E2E ' +
+    'testing.',
   annotations: {
     category: ToolCategory.EXTENSIONS,
     readOnlyHint: false,
@@ -33,7 +35,8 @@ export const installExtension = defineTool({
 
 export const uninstallExtension = defineTool({
   name: 'uninstall_extension',
-  description: 'Uninstalls a Chrome extension by its ID.',
+  description:
+    'Remove an extension previously installed via this server (by id).',
   annotations: {
     category: ToolCategory.EXTENSIONS,
     readOnlyHint: false,
@@ -52,7 +55,8 @@ export const uninstallExtension = defineTool({
 export const listExtensions = defineTool({
   name: 'list_extensions',
   description:
-    'Lists all extensions via this server, including their name, ID, version, and enabled status.',
+    'Show installed extensions from this session: id, version, path, ' +
+    'enabled state.',
   annotations: {
     category: ToolCategory.EXTENSIONS,
     readOnlyHint: true,
@@ -66,7 +70,7 @@ export const listExtensions = defineTool({
 
 export const reloadExtension = defineTool({
   name: 'reload_extension',
-  description: 'Reloads an unpacked Chrome extension by its ID.',
+  description: 'Re-read unpacked extension files from disk after code changes.',
   annotations: {
     category: ToolCategory.EXTENSIONS,
     readOnlyHint: false,
@@ -88,7 +92,8 @@ export const reloadExtension = defineTool({
 
 export const triggerExtensionAction = defineTool({
   name: 'trigger_extension_action',
-  description: 'Triggers an action in a Chrome extension.',
+  description:
+    'Invoke the extension browser-action / toolbar button programmatically.',
   annotations: {
     category: ToolCategory.EXTENSIONS,
     readOnlyHint: false,
diff --git a/src/tools/inPage.ts b/src/tools/inPage.ts
index 0cb1b6ba7..216af9601 100644
--- a/src/tools/inPage.ts
+++ b/src/tools/inPage.ts
@@ -42,13 +42,10 @@ declare global {
 
 export const listInPageTools = definePageTool({
   name: 'list_in_page_tools',
-  description: `Lists all in-page tools the page exposes for providing runtime information.
-  In-page tools can be called via the 'execute_in_page_tool()' MCP tool.
-  Alternatively, in-page tools can be executed by calling 'evaluate_script' and adding the
-  following command to the script:
-  'window.__dtmcp.executeTool(toolName, params)'
-  This might be helpful when the in-page-tools return non-serializable values or when composing
-  the in-page-tools with additional functionality.`,
+  description:
+    'Discover custom tools published by the page under window.__dtmcp. ' +
+    'Call them via execute_in_page_tool or evaluate_script ' +
+    '(window.__dtmcp.executeTool).',
   annotations: {
     category: ToolCategory.IN_PAGE,
     readOnlyHint: true,
@@ -62,7 +59,9 @@ export const listInPageTools = definePageTool({
 
 export const executeInPageTool = definePageTool({
   name: 'execute_in_page_tool',
-  description: `Executes a tool exposed by the page.`,
+  description:
+    'Run a page-defined __dtmcp tool by name with JSON params; {uid} refs ' +
+    'resolve to elements.',
   annotations: {
     category: ToolCategory.IN_PAGE,
     readOnlyHint: false,
diff --git a/src/tools/input.ts b/src/tools/input.ts
index bce93f73b..88dc26ef6 100644
--- a/src/tools/input.ts
+++ b/src/tools/input.ts
@@ -44,7 +44,10 @@ function handleActionError(error: unknown, uid: string) {
 
 export const click = definePageTool({
   name: 'click',
-  description: `Clicks on the provided element`,
+  description:
+    'Perform a primary (or double) click on an element identified by ' +
+    'snapshot uid. Prefer this over guessing selectors when automating ' +
+    'from take_snapshot.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -85,7 +88,9 @@ export const click = definePageTool({
 
 export const clickAt = definePageTool({
   name: 'click_at',
-  description: `Clicks at the provided coordinates`,
+  description:
+    'Click at viewport x/y when no stable uid exists (canvas, custom ' +
+    'overlays). Prefer click(uid) whenever take_snapshot exposes a target.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -117,7 +122,9 @@ export const clickAt = definePageTool({
 
 export const hover = definePageTool({
   name: 'hover',
-  description: `Hover over the provided element`,
+  description:
+    'Move the pointer over a uid so hover-only UI (menus, tooltips) ' +
+    'appears before another action.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -219,7 +226,9 @@ async function fillFormElement(
 
 export const fill = definePageTool({
   name: 'fill',
-  description: `Type text into an input, text area or select an option from a <select> element.`,
+  description:
+    'Set value on inputs, textareas, or select/combobox options from ' +
+    'snapshot uid. Prefer over type_text when filling whole fields.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -252,7 +261,9 @@ export const fill = definePageTool({
 
 export const typeText = definePageTool({
   name: 'type_text',
-  description: `Type text using keyboard into a previously focused input`,
+  description:
+    'Send keystrokes to the focused element; optional submitKey (e.g. ' +
+    'Enter). Use after click/fill when key-by-key input matters.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -279,7 +290,9 @@ export const typeText = definePageTool({
 
 export const drag = definePageTool({
   name: 'drag',
-  description: `Drag an element onto another element`,
+  description:
+    'Drag from_uid onto to_uid for drop targets, reorder lists, or ' +
+    'file-like interactions modeled as drag-and-drop.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -313,7 +326,8 @@ export const drag = definePageTool({
 
 export const fillForm = definePageTool({
   name: 'fill_form',
-  description: `Fill out multiple form elements at once`,
+  description:
+    'Batch-fill many {uid, value} pairs in one call for multi-field forms.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -351,7 +365,9 @@ export const fillForm = definePageTool({
 
 export const uploadFile = definePageTool({
   name: 'upload_file',
-  description: 'Upload a file through a provided element.',
+  description:
+    'Attach a local file path to a file input or an element that opens ' +
+    'a file chooser.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -401,7 +417,9 @@ export const uploadFile = definePageTool({
 
 export const pressKey = definePageTool({
   name: 'press_key',
-  description: `Press a key or key combination. Use this when other input methods like fill() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).`,
+  description:
+    'Press a key chord (e.g. Control+R, Escape). Use for shortcuts or ' +
+    'when fill/type_text cannot model the interaction.',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
diff --git a/src/tools/lighthouse.ts b/src/tools/lighthouse.ts
index 606abf1ad..d1a4ab8e2 100644
--- a/src/tools/lighthouse.ts
+++ b/src/tools/lighthouse.ts
@@ -22,7 +22,9 @@ import {definePageTool} from './ToolDefinition.js';
 
 export const lighthouseAudit = definePageTool({
   name: 'lighthouse_audit',
-  description: `Get Lighthouse score and reports for accessibility, SEO and best practices. This excludes performance. For performance audits, run ${startTrace.name}`,
+  description:
+    'Lighthouse a11y/SEO/best-practices only (HTML+JSON reports). For ' +
+    `load/runtime timelines use ${startTrace.name}.`,
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: false,
diff --git a/src/tools/memory.ts b/src/tools/memory.ts
index b1f302ae1..33f64fd56 100644
--- a/src/tools/memory.ts
+++ b/src/tools/memory.ts
@@ -11,7 +11,9 @@ import {definePageTool} from './ToolDefinition.js';
 
 export const takeMemorySnapshot = definePageTool({
   name: 'take_memory_snapshot',
-  description: `Capture a heap snapshot of the currently selected page. Use to analyze the memory distribution of JavaScript objects and debug memory leaks.`,
+  description:
+    'Write a .heapsnapshot for the current target; open in Memory panel ' +
+    'to find leaks and retainers.',
   annotations: {
     category: ToolCategory.PERFORMANCE,
     readOnlyHint: false,
diff --git a/src/tools/network.ts b/src/tools/network.ts
index 2df445cc3..575c2304c 100644
--- a/src/tools/network.ts
+++ b/src/tools/network.ts
@@ -34,7 +34,9 @@ const FILTERABLE_RESOURCE_TYPES: readonly [ResourceType, ...ResourceType[]] = [
 
 export const listNetworkRequests = definePageTool({
   name: 'list_network_requests',
-  description: `List all requests for the currently selected page since the last navigation.`,
+  description:
+    'HTTP/S requests since navigation: URL, status, timing, size. Filter ' +
+    'by resource type; paginate large logs.',
   annotations: {
     category: ToolCategory.NETWORK,
     readOnlyHint: true,
@@ -88,7 +90,9 @@ export const listNetworkRequests = definePageTool({
 
 export const getNetworkRequest = definePageTool({
   name: 'get_network_request',
-  description: `Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.`,
+  description:
+    'Full request/response for a reqid from list_network_requests; omit ' +
+    'reqid to use the row selected in the Network panel.',
   annotations: {
     category: ToolCategory.NETWORK,
     readOnlyHint: false,
diff --git a/src/tools/pages.ts b/src/tools/pages.ts
index 184a51350..ab87d8a5a 100644
--- a/src/tools/pages.ts
+++ b/src/tools/pages.ts
@@ -19,7 +19,11 @@ import {
 export const listPages = defineTool(args => {
   return {
     name: 'list_pages',
-    description: `Get a list of pages ${args?.categoryExtensions ? 'including extension service workers' : ''} open in the browser.`,
+    description:
+      'List browser tabs with ids and URLs for select_page / close_page.' +
+      (args?.categoryExtensions
+        ? ' Includes extension service worker targets when enabled.'
+        : ''),
     annotations: {
       category: ToolCategory.NAVIGATION,
       readOnlyHint: true,
@@ -34,7 +38,9 @@ export const listPages = defineTool(args => {
 
 export const selectPage = defineTool({
   name: 'select_page',
-  description: `Select a page as a context for future tool calls.`,
+  description:
+    'Make pageId the active tab for following tools (required when multiple ' +
+    'tabs are open).',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: true,
@@ -63,7 +69,8 @@ export const selectPage = defineTool({
 
 export const closePage = defineTool({
   name: 'close_page',
-  description: `Closes the page by its index. The last open page cannot be closed.`,
+  description:
+    'Close a tab by pageId from list_pages. The last tab cannot be closed.',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: false,
@@ -90,7 +97,9 @@ export const closePage = defineTool({
 
 export const newPage = defineTool({
   name: 'new_page',
-  description: `Open a new tab and load a URL. Use project URL if not specified otherwise.`,
+  description:
+    'Open a tab and goto url; optional background or isolatedContext ' +
+    '(separate storage). Use for parallel sessions.',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: false,
@@ -135,7 +144,9 @@ export const newPage = defineTool({
 
 export const navigatePage = definePageTool({
   name: 'navigate_page',
-  description: `Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.`,
+  description:
+    'Navigate: url, back, forward, or reload; optional cache bypass, ' +
+    'per-navigation init script, beforeunload handling.',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: false,
@@ -285,7 +296,9 @@ export const navigatePage = definePageTool({
 
 export const resizePage = definePageTool({
   name: 'resize_page',
-  description: `Resizes the selected page's window so that the page has specified dimension`,
+  description:
+    'Resize the window so the page content matches width x height ' +
+    '(responsive layout debugging).',
   annotations: {
     category: ToolCategory.EMULATION,
     readOnlyHint: false,
@@ -324,7 +337,9 @@ export const resizePage = definePageTool({
 
 export const handleDialog = definePageTool({
   name: 'handle_dialog',
-  description: `If a browser dialog was opened, use this command to handle it`,
+  description:
+    'Accept or dismiss the current alert/confirm/prompt; optional ' +
+    'promptText for prompt().',
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -375,7 +390,8 @@ export const handleDialog = definePageTool({
 
 export const getTabId = definePageTool({
   name: 'get_tab_id',
-  description: `Get the tab ID of the page`,
+  description:
+    'Return Chrome tab id for interop with external DevTools clients.',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: true,
diff --git a/src/tools/performance.ts b/src/tools/performance.ts
index c02b627b9..f2366f488 100644
--- a/src/tools/performance.ts
+++ b/src/tools/performance.ts
@@ -28,7 +28,9 @@ const filePathSchema = zod
 
 export const startTrace = definePageTool({
   name: 'performance_start_trace',
-  description: `Start a performance trace on the selected webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.`,
+  description:
+    'Record a DevTools performance trace (reload optional). Use for load ' +
+    'speed, main-thread jank, and Core Web Vitals—not Lighthouse scores.',
   annotations: {
     category: ToolCategory.PERFORMANCE,
     readOnlyHint: false,
@@ -117,7 +119,8 @@ export const startTrace = definePageTool({
 export const stopTrace = definePageTool({
   name: 'performance_stop_trace',
   description:
-    'Stop the active performance trace recording on the selected webpage.',
+    'Stop tracing and return trace summary; optional filePath for raw ' +
+    'trace JSON (.json or .gz).',
   annotations: {
     category: ToolCategory.PERFORMANCE,
     readOnlyHint: false,
@@ -142,7 +145,8 @@ export const stopTrace = definePageTool({
 export const analyzeInsight = definePageTool({
   name: 'performance_analyze_insight',
   description:
-    'Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.',
+    'Expand one insight from the last trace (insightSetId + insightName ' +
+    'from trace output).',
   annotations: {
     category: ToolCategory.PERFORMANCE,
     readOnlyHint: true,
diff --git a/src/tools/screencast.ts b/src/tools/screencast.ts
index a5ab1c38e..27904a6ef 100644
--- a/src/tools/screencast.ts
+++ b/src/tools/screencast.ts
@@ -22,7 +22,8 @@ async function generateTempFilePath(): Promise<string> {
 export const startScreencast = definePageTool({
   name: 'screencast_start',
   description:
-    'Starts recording a screencast (video) of the selected page in mp4 format.',
+    'Record the tab to MP4 (ffmpeg required). For visual repros; pair with ' +
+    'screencast_stop.',
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: false,
@@ -77,7 +78,8 @@ export const startScreencast = definePageTool({
 
 export const stopScreencast = definePageTool({
   name: 'screencast_stop',
-  description: 'Stops the active screencast recording on the selected page.',
+  description:
+    'Finish MP4 recording started by screencast_start; flushes file path.',
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: false,
diff --git a/src/tools/screenshot.ts b/src/tools/screenshot.ts
index 2e648531c..9a6f7e45f 100644
--- a/src/tools/screenshot.ts
+++ b/src/tools/screenshot.ts
@@ -12,7 +12,9 @@ import {definePageTool} from './ToolDefinition.js';
 
 export const screenshot = definePageTool({
   name: 'take_screenshot',
-  description: `Take a screenshot of the page or element.`,
+  description:
+    'Capture PNG/JPEG/WebP of viewport, full page, or a uid element; use ' +
+    'when pixels matter (layout, regressions), not for DOM structure.',
   annotations: {
     category: ToolCategory.DEBUGGING,
     // Not read-only due to filePath param.
diff --git a/src/tools/script.ts b/src/tools/script.ts
index 725628bcd..076c88ea2 100644
--- a/src/tools/script.ts
+++ b/src/tools/script.ts
@@ -17,8 +17,10 @@ export type Evaluatable = Page | Frame | WebWorker;
 export const evaluateScript = defineTool(cliArgs => {
   return {
     name: 'evaluate_script',
-    description: `Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON,
-so returned values have to be JSON-serializable.`,
+    description:
+      'Run an async/sync function body in the page; result JSON-serializable. ' +
+      'Pass snapshot element uids as args to receive DOM handles. For ' +
+      'extensions, optional serviceWorkerId targets the worker.',
     annotations: {
       category: ToolCategory.DEBUGGING,
       readOnlyHint: false,
diff --git a/src/tools/slim/tools.ts b/src/tools/slim/tools.ts
index 712dcff63..b5c6c44c3 100644
--- a/src/tools/slim/tools.ts
+++ b/src/tools/slim/tools.ts
@@ -11,7 +11,8 @@ import {definePageTool} from '../ToolDefinition.js';
 
 export const screenshot = definePageTool({
   name: 'screenshot',
-  description: `Takes a screenshot`,
+  description:
+    'Viewport PNG saved to a temp path (--slim mode; minimal footprint).',
   annotations: {
     category: ToolCategory.DEBUGGING,
     // Not read-only due to filePath param.
@@ -34,7 +35,8 @@ export const screenshot = definePageTool({
 
 export const navigate = definePageTool({
   name: 'navigate',
-  description: `Loads a URL`,
+  description:
+    'Navigate the selected tab to url (--slim; accepts beforeunload).',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: false,
@@ -71,7 +73,8 @@ export const navigate = definePageTool({
 
 export const evaluate = definePageTool({
   name: 'evaluate',
-  description: `Evaluates a JavaScript script`,
+  description:
+    'Evaluate a script string in page context; returns text/JSON (--slim).',
   annotations: {
     category: ToolCategory.DEBUGGING,
     readOnlyHint: false,
diff --git a/src/tools/snapshot.ts b/src/tools/snapshot.ts
index 338bd6794..9bd61aac2 100644
--- a/src/tools/snapshot.ts
+++ b/src/tools/snapshot.ts
@@ -11,9 +11,10 @@ import {definePageTool, timeoutSchema} from './ToolDefinition.js';
 
 export const takeSnapshot = definePageTool({
   name: 'take_snapshot',
-  description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique
-identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected
-in the DevTools Elements panel (if any).`,
+  description:
+    'Accessibility tree with stable uids for automation. Always use the ' +
+    'latest snapshot after DOM changes. Prefer over screenshot for ' +
+    'structure; reflects Elements panel selection when set.',
   annotations: {
     category: ToolCategory.DEBUGGING,
     // Not read-only due to filePath param.
@@ -43,7 +44,9 @@ in the DevTools Elements panel (if any).`,
 
 export const waitFor = definePageTool({
   name: 'wait_for',
-  description: `Wait for the specified text to appear on the selected page.`,
+  description:
+    'Wait until any of the given strings appears (async rendering, ' +
+    'SPA transitions).',
   annotations: {
     category: ToolCategory.NAVIGATION,
     readOnlyHint: true,
diff --git a/src/tools/styles.ts b/src/tools/styles.ts
new file mode 100644
index 000000000..60ba19455
--- /dev/null
+++ b/src/tools/styles.ts
@@ -0,0 +1,1124 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {zod as z} from '../third_party/index.js';
+import type {ElementHandle} from '../third_party/index.js';
+
+import {ToolCategory} from './categories.js';
+import {definePageTool} from './ToolDefinition.js';
+// Intentionally no direct imports to avoid unused types and keep payload small.
+
+type CssPropertyMap = Record<string, string>;
+
+interface BorderRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+interface StyleSnapshotMeta {
+  capturedAt: string;
+  url: string;
+  viewportWidth: number;
+  viewportHeight: number;
+  dpr: number;
+}
+
+interface StyleSnapshotElement {
+  computed: CssPropertyMap;
+  borderRect?: BorderRect;
+  domPath?: string;
+  backendNodeId?: number;
+}
+
+interface StyleSnapshotData {
+  meta: StyleSnapshotMeta;
+  elements: Record<string, StyleSnapshotElement>;
+}
+
+/** Legacy: flat uid -> computed map (pre v1). */
+type LegacySnapshotMap = Record<string, CssPropertyMap>;
+
+const GEOMETRY_EPS_PX = 0.5;
+
+// Per-context named snapshots (v1 or legacy flat map).
+const snapshotsStore = new WeakMap<
+  object,
+  Map<string, StyleSnapshotData | LegacySnapshotMap>
+>();
+
+function getSnapshots(context: object) {
+  let map = snapshotsStore.get(context);
+  if (!map) {
+    map = new Map();
+    snapshotsStore.set(context, map);
+  }
+  return map;
+}
+
+function isV1Snapshot(
+  s: StyleSnapshotData | LegacySnapshotMap,
+): s is StyleSnapshotData {
+  return typeof s === 'object' && s !== null && 'meta' in s && 'elements' in s;
+}
+
+function snapshotElements(
+  raw: StyleSnapshotData | LegacySnapshotMap,
+): Record<string, StyleSnapshotElement> {
+  if (isV1Snapshot(raw)) {
+    return raw.elements;
+  }
+  const out: Record<string, StyleSnapshotElement> = {};
+  for (const [uid, computed] of Object.entries(raw)) {
+    out[uid] = {computed};
+  }
+  return out;
+}
+
+function snapshotMeta(
+  raw: StyleSnapshotData | LegacySnapshotMap,
+): StyleSnapshotMeta | undefined {
+  return isV1Snapshot(raw) ? raw.meta : undefined;
+}
+
+function rectFromQuad(
+  quad: Array<{x: number; y: number}> | number[],
+): BorderRect {
+  if (Array.isArray(quad) && typeof quad[0] === 'number') {
+    const xs = [
+      quad[0] as number,
+      quad[2] as number,
+      quad[4] as number,
+      quad[6] as number,
+    ];
+    const ys = [
+      quad[1] as number,
+      quad[3] as number,
+      quad[5] as number,
+      quad[7] as number,
+    ];
+    const left = Math.min(...xs);
+    const top = Math.min(...ys);
+    const right = Math.max(...xs);
+    const bottom = Math.max(...ys);
+    return {
+      left,
+      top,
+      right,
+      bottom,
+      width: right - left,
+      height: bottom - top,
+    };
+  }
+  const points = quad as Array<{x: number; y: number}>;
+  const xs = points.map(p => p.x);
+  const ys = points.map(p => p.y);
+  const left = Math.min(...xs);
+  const top = Math.min(...ys);
+  const right = Math.max(...xs);
+  const bottom = Math.max(...ys);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+}
+
+function borderRectsMatch(
+  a?: BorderRect,
+  b?: BorderRect,
+  eps = GEOMETRY_EPS_PX,
+) {
+  if (!a || !b) {
+    return !a && !b;
+  }
+  return (
+    Math.abs(a.left - b.left) <= eps &&
+    Math.abs(a.top - b.top) <= eps &&
+    Math.abs(a.width - b.width) <= eps &&
+    Math.abs(a.height - b.height) <= eps
+  );
+}
+
+function isLayoutProperty(p: string): boolean {
+  const x = p.toLowerCase();
+  return (
+    x.includes('width') ||
+    x.includes('height') ||
+    x.includes('margin') ||
+    x.includes('padding') ||
+    x.includes('border') ||
+    x === 'display' ||
+    x === 'position' ||
+    x.includes('flex') ||
+    x.includes('grid') ||
+    x.includes('gap') ||
+    x === 'transform' ||
+    x === 'top' ||
+    x === 'left' ||
+    x === 'right' ||
+    x === 'bottom' ||
+    x.includes('inset')
+  );
+}
+
+function classifyStyleDiff(
+  styleChanges: Array<{property: string}>,
+  geometryEqual: boolean | undefined,
+): {
+  changeClass: 'none' | 'cascadeOnly' | 'layoutEffective' | 'paintLikely';
+  effectiveLayoutChange: boolean;
+} {
+  if (styleChanges.length === 0) {
+    if (geometryEqual === undefined) {
+      return {changeClass: 'none', effectiveLayoutChange: false};
+    }
+    const layoutShift = geometryEqual === false;
+    return {
+      changeClass: layoutShift ? 'layoutEffective' : 'none',
+      effectiveLayoutChange: layoutShift,
+    };
+  }
+  if (geometryEqual === false) {
+    return {changeClass: 'layoutEffective', effectiveLayoutChange: true};
+  }
+  const touchedLayout = styleChanges.some(c => isLayoutProperty(c.property));
+  if (geometryEqual === true && touchedLayout) {
+    return {changeClass: 'cascadeOnly', effectiveLayoutChange: false};
+  }
+  if (geometryEqual === undefined && touchedLayout) {
+    return {changeClass: 'layoutEffective', effectiveLayoutChange: false};
+  }
+  if (touchedLayout) {
+    return {changeClass: 'layoutEffective', effectiveLayoutChange: true};
+  }
+  return {changeClass: 'paintLikely', effectiveLayoutChange: false};
+}
+
+async function domPathForHandle(handle: ElementHandle<Element>) {
+  return handle.evaluate((el: Element) => {
+    const parts: string[] = [];
+    let current: Element | null = el;
+    const stopAt = document.documentElement.parentElement;
+    while (current && current !== stopAt) {
+      const tag = current.tagName.toLowerCase();
+      const par: Element | null = current.parentElement;
+      let idx = 1;
+      if (par) {
+        for (const c of par.children) {
+          if (c.tagName === current.tagName) {
+            if (c === current) {
+              break;
+            }
+            idx++;
+          }
+        }
+      }
+      parts.unshift(`${tag}:nth-of-type(${idx})`);
+      current = par;
+    }
+    return parts.join(' > ');
+  });
+}
+
+function toMap(
+  properties: Array<{name: string; value: string}> | undefined,
+): CssPropertyMap {
+  const map: CssPropertyMap = {};
+  for (const {name, value} of properties ?? []) {
+    map[name] = value;
+  }
+  return map;
+}
+
+function filterMap(
+  map: CssPropertyMap,
+  properties?: string[] | undefined,
+): CssPropertyMap {
+  if (!properties?.length) {
+    return map;
+  }
+  const out: CssPropertyMap = {};
+  for (const key of properties) {
+    if (key in map) {
+      out[key] = map[key];
+    }
+  }
+  return out;
+}
+
+function resolveSnapshotElement(
+  elements: Record<string, StyleSnapshotElement>,
+  uid: string,
+  domPath?: string,
+): StyleSnapshotElement | undefined {
+  const direct = elements[uid];
+  if (direct) {
+    return direct;
+  }
+  if (!domPath?.length) {
+    return undefined;
+  }
+  for (const el of Object.values(elements)) {
+    if (el.domPath === domPath) {
+      return el;
+    }
+  }
+  return undefined;
+}
+
+function borderQuadToNumbers(
+  border: unknown,
+): [number, number, number, number, number, number, number, number] | null {
+  if (!Array.isArray(border) || border.length < 8) {
+    return null;
+  }
+  if (typeof border[0] === 'number') {
+    return border as [
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+    ];
+  }
+  const pts = border as Array<{x: number; y: number}>;
+  const out: number[] = [];
+  for (const p of pts) {
+    out.push(p.x, p.y);
+  }
+  return out.length >= 8
+    ? (out.slice(0, 8) as [
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+        number,
+      ])
+    : null;
+}
+
+export const getComputedStyles = definePageTool({
+  name: 'get_computed_styles',
+  description:
+    'Resolved computed styles for one uid; optional property filter and ' +
+    'winning-rule hints (includeSources). Prefer over scraping styles in ' +
+    'evaluate_script.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uid: z
+      .string()
+      .describe(
+        'The uid of an element on the page from the page content snapshot',
+      ),
+    properties: z.array(z.string()).optional().describe('Optional filter list'),
+    includeSources: z
+      .boolean()
+      .optional()
+      .describe('If true, include best-effort winning rule origins'),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    const handle = await request.page.getElementByUid(request.params.uid);
+    try {
+      await context.ensureDomDomainEnabledForPage(pptr);
+      await context.ensureCssDomainEnabledForPage(pptr);
+      // @ts-expect-error internal API
+      const client = pptr._client();
+
+      const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+      const {computedStyle} = await client.send('CSS.getComputedStyleForNode', {
+        nodeId,
+      });
+
+      const map = toMap(
+        computedStyle as Array<{name: string; value: string}> | undefined,
+      );
+      const filtered = filterMap(map, request.params.properties);
+
+      const result: {
+        computed: CssPropertyMap;
+        sourceMap?: Record<string, unknown>;
+      } = {
+        computed: filtered,
+      };
+
+      if (request.params.includeSources) {
+        try {
+          const {matchedCSSRules, inlineStyle, attributesStyle} =
+            await client.send('CSS.getMatchedStylesForNode', {nodeId});
+
+          const origins: Record<string, unknown> = {};
+          const candidates: Array<{
+            source: string;
+            selector?: string;
+            origin?: string;
+            styleSheetId?: string;
+            range?: unknown;
+            properties?: Array<{name: string; value: string}>;
+          }> = [];
+
+          if (inlineStyle) {
+            candidates.push({
+              source: 'inline',
+              properties: inlineStyle.cssProperties,
+            });
+          }
+          if (attributesStyle) {
+            candidates.push({
+              source: 'attributes',
+              properties: attributesStyle.cssProperties,
+            });
+          }
+          for (const rule of matchedCSSRules ?? []) {
+            candidates.push({
+              source: 'rule',
+              selector: rule.rule.selectorList?.text,
+              origin: rule.rule.origin,
+              styleSheetId: rule.rule.styleSheetId,
+              range: rule.rule.style?.range,
+              properties: rule.rule.style?.cssProperties,
+            });
+          }
+
+          interface OriginEntry {
+            source: string;
+            selector?: string;
+            origin?: string;
+            styleSheetId?: string;
+            range?: unknown;
+            value: string;
+          }
+          const propIndex = new Map<string, OriginEntry[]>();
+          for (const c of candidates) {
+            for (const p of c.properties ?? []) {
+              let arr = propIndex.get(p.name);
+              if (!arr) {
+                arr = [];
+                propIndex.set(p.name, arr);
+              }
+              arr.push({
+                source: c.source,
+                selector: c.selector,
+                origin: c.origin,
+                styleSheetId: c.styleSheetId,
+                range: c.range,
+                value: p.value,
+              });
+            }
+          }
+          for (const propName of Object.keys(filtered)) {
+            const entries = propIndex.get(propName);
+            if (!entries) {
+              continue;
+            }
+            const computedVal = filtered[propName];
+            let origin: Record<string, unknown> | null = null;
+            for (const e of entries) {
+              if (e.value === computedVal) {
+                origin = {
+                  source: e.source,
+                  selector: e.selector,
+                  origin: e.origin,
+                  styleSheetId: e.styleSheetId,
+                  range: e.range,
+                };
+                break;
+              }
+              if (!origin) {
+                origin = {
+                  source: e.source,
+                  selector: e.selector,
+                  origin: e.origin,
+                  styleSheetId: e.styleSheetId,
+                  range: e.range,
+                };
+              }
+            }
+            if (origin) {
+              origins[propName] = origin;
+            }
+          }
+          result.sourceMap = origins;
+        } catch {
+          // ignore origin errors; keep computed only
+        }
+      }
+
+      response.appendResponseLine('Computed styles:');
+      response.appendResponseLine('```json');
+      response.appendResponseLine(JSON.stringify(result));
+      response.appendResponseLine('```');
+    } finally {
+      await handle.dispose();
+    }
+  },
+});
+
+export const getBoxModel = definePageTool({
+  name: 'get_box_model',
+  description:
+    'CDP box model quads and rects for layout misalignment, overflow, and ' +
+    'offset debugging.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uid: z
+      .string()
+      .describe(
+        'The uid of an element on the page from the page content snapshot',
+      ),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    const handle = await request.page.getElementByUid(request.params.uid);
+    try {
+      await context.ensureDomDomainEnabledForPage(pptr);
+      // @ts-expect-error internal API
+      const client = pptr._client();
+
+      const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+      const {model} = await client.send('DOM.getBoxModel', {nodeId});
+
+      const borderRect = rectFromQuad(model.border as unknown as number[]);
+      const contentRect = rectFromQuad(model.content as unknown as number[]);
+      const paddingRect = rectFromQuad(model.padding as unknown as number[]);
+      const marginRect = rectFromQuad(model.margin as unknown as number[]);
+      const clientRect = paddingRect; // client box ~= content + padding
+      const boundingRect = borderRect; // bounding box ~= border box
+
+      let dpr = 1;
+      try {
+        const evalRes = await client.send('Runtime.evaluate', {
+          expression: 'window.devicePixelRatio',
+          returnByValue: true,
+        });
+        dpr = Number(evalRes.result?.value ?? 1) || 1;
+      } catch {
+        void 0;
+      }
+
+      const round = (x: number) => Math.round(x * dpr);
+
+      const result = {
+        width: model.width,
+        height: model.height,
+        contentQuad: model.content,
+        paddingQuad: model.padding,
+        borderQuad: model.border,
+        marginQuad: model.margin,
+        contentRect,
+        paddingRect,
+        borderRect,
+        marginRect,
+        clientRect,
+        boundingRect,
+        devicePixelRounded: {
+          contentRect: {
+            left: round(contentRect.left),
+            top: round(contentRect.top),
+            right: round(contentRect.right),
+            bottom: round(contentRect.bottom),
+            width: round(contentRect.width),
+            height: round(contentRect.height),
+          },
+          paddingRect: {
+            left: round(paddingRect.left),
+            top: round(paddingRect.top),
+            right: round(paddingRect.right),
+            bottom: round(paddingRect.bottom),
+            width: round(paddingRect.width),
+            height: round(paddingRect.height),
+          },
+          borderRect: {
+            left: round(borderRect.left),
+            top: round(borderRect.top),
+            right: round(borderRect.right),
+            bottom: round(borderRect.bottom),
+            width: round(borderRect.width),
+            height: round(borderRect.height),
+          },
+          marginRect: {
+            left: round(marginRect.left),
+            top: round(marginRect.top),
+            right: round(marginRect.right),
+            bottom: round(marginRect.bottom),
+            width: round(marginRect.width),
+            height: round(marginRect.height),
+          },
+          clientRect: {
+            left: round(clientRect.left),
+            top: round(clientRect.top),
+            right: round(clientRect.right),
+            bottom: round(clientRect.bottom),
+            width: round(clientRect.width),
+            height: round(clientRect.height),
+          },
+          boundingRect: {
+            left: round(boundingRect.left),
+            top: round(boundingRect.top),
+            right: round(boundingRect.right),
+            bottom: round(boundingRect.bottom),
+            width: round(boundingRect.width),
+            height: round(boundingRect.height),
+          },
+        },
+      };
+
+      response.appendResponseLine('Box model:');
+      response.appendResponseLine('```json');
+      response.appendResponseLine(JSON.stringify(result));
+      response.appendResponseLine('```');
+    } finally {
+      await handle.dispose();
+    }
+  },
+});
+
+export const getVisibility = definePageTool({
+  name: 'get_visibility',
+  description:
+    'Explain why an element is invisible (display, opacity, zero size, ' +
+    'off-viewport, clip-path).',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uid: z
+      .string()
+      .describe(
+        'The uid of an element on the page from the page content snapshot',
+      ),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    const handle = await request.page.getElementByUid(request.params.uid);
+    try {
+      await context.ensureDomDomainEnabledForPage(pptr);
+      await context.ensureCssDomainEnabledForPage(pptr);
+      // @ts-expect-error internal API
+      const client = pptr._client();
+
+      const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+      const [computedRes, boxRes] = await Promise.all([
+        client.send('CSS.getComputedStyleForNode', {nodeId}),
+        client.send('DOM.getBoxModel', {nodeId}).catch(() => null),
+      ]);
+      const style = toMap(
+        computedRes.computedStyle as
+          | Array<{name: string; value: string}>
+          | undefined,
+      );
+
+      const boxModel: {
+        width: number;
+        height: number;
+        border: Array<{x: number; y: number}>;
+      } | null = boxRes?.model ?? null;
+
+      const reasons: string[] = [];
+
+      if (style['display'] === 'none') {
+        reasons.push('display:none');
+      }
+      if (
+        style['visibility'] === 'hidden' ||
+        style['visibility'] === 'collapse'
+      ) {
+        reasons.push('visibility:hidden');
+      }
+      if (Number(parseFloat(style['opacity'] ?? '1')) === 0) {
+        reasons.push('opacity:0');
+      }
+
+      if (boxModel) {
+        if (boxModel.width === 0 || boxModel.height === 0) {
+          reasons.push('zero-size');
+        }
+        const quad = boxModel.border as Array<{x: number; y: number}>;
+        const xs = quad.map(p => p.x);
+        const ys = quad.map(p => p.y);
+        const left = Math.min(...xs);
+        const top = Math.min(...ys);
+        const right = Math.max(...xs);
+        const bottom = Math.max(...ys);
+
+        try {
+          const {layoutViewport} = await client.send('Page.getLayoutMetrics');
+          const vLeft = layoutViewport?.pageX ?? 0;
+          const vTop = layoutViewport?.pageY ?? 0;
+          const vRight = vLeft + (layoutViewport?.clientWidth ?? 0);
+          const vBottom = vTop + (layoutViewport?.clientHeight ?? 0);
+          const intersects = !(
+            right < vLeft ||
+            left > vRight ||
+            bottom < vTop ||
+            top > vBottom
+          );
+          if (!intersects) {
+            reasons.push('off-viewport');
+          }
+        } catch {
+          void 0;
+        }
+      }
+
+      if ((style['clip-path'] ?? 'none') !== 'none') {
+        reasons.push('clip-path');
+      }
+
+      const isVisible = reasons.length === 0;
+      const result = {isVisible, reasons};
+      response.appendResponseLine('Visibility:');
+      response.appendResponseLine('```json');
+      response.appendResponseLine(JSON.stringify(result));
+      response.appendResponseLine('```');
+    } finally {
+      await handle.dispose();
+    }
+  },
+});
+
+export const getComputedStylesBatch = definePageTool({
+  name: 'get_computed_styles_batch',
+  description:
+    'Batch computed styles map keyed by uid—use for design tokens or ' +
+    'multi-node parity checks.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uids: z
+      .array(z.string())
+      .describe(
+        'The uids of elements on the page from the page content snapshot',
+      ),
+    properties: z.array(z.string()).optional().describe('Optional filter list'),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    await context.ensureDomDomainEnabledForPage(pptr);
+    await context.ensureCssDomainEnabledForPage(pptr);
+    // @ts-expect-error internal API
+    const client = pptr._client();
+
+    const results: Record<string, CssPropertyMap> = {};
+    await Promise.all(
+      request.params.uids.map(async uid => {
+        const handle = await request.page.getElementByUid(uid);
+        try {
+          const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+          const {computedStyle} = await client.send(
+            'CSS.getComputedStyleForNode',
+            {
+              nodeId,
+            },
+          );
+          const map = toMap(
+            computedStyle as Array<{name: string; value: string}> | undefined,
+          );
+          results[uid] = filterMap(map, request.params.properties);
+        } finally {
+          await handle.dispose();
+        }
+      }),
+    );
+
+    response.appendResponseLine('Computed styles (batch):');
+    response.appendResponseLine('```json');
+    response.appendResponseLine(JSON.stringify(results));
+    response.appendResponseLine('```');
+  },
+});
+
+export const diffComputedStyles = definePageTool({
+  name: 'diff_computed_styles',
+  description:
+    'Side-by-side style diff for two uids on the same page; optional ' +
+    'geometry compare for layout-affecting changes.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uidA: z.string().describe('First element uid'),
+    uidB: z.string().describe('Second element uid'),
+    properties: z.array(z.string()).optional().describe('Optional filter list'),
+    compareGeometry: z
+      .boolean()
+      .optional()
+      .describe(
+        'If true, compare border-box geometry and classify effective layout change.',
+      ),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    await context.ensureDomDomainEnabledForPage(pptr);
+    await context.ensureCssDomainEnabledForPage(pptr);
+    // @ts-expect-error internal API
+    const client = pptr._client();
+
+    async function getMapAndRect(uid: string): Promise<{
+      map: CssPropertyMap;
+      rect?: BorderRect;
+    }> {
+      const handle = await request.page.getElementByUid(uid);
+      try {
+        const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+        const {computedStyle} = await client.send(
+          'CSS.getComputedStyleForNode',
+          {
+            nodeId,
+          },
+        );
+        const map = filterMap(
+          toMap(
+            computedStyle as Array<{name: string; value: string}> | undefined,
+          ),
+          request.params.properties,
+        );
+        let rect: BorderRect | undefined;
+        if (request.params.compareGeometry) {
+          try {
+            const bm = await client.send('DOM.getBoxModel', {nodeId});
+            if (bm.model?.border) {
+              rect = rectFromQuad(bm.model.border as number[]);
+            }
+          } catch {
+            void 0;
+          }
+        }
+        return {map, rect};
+      } finally {
+        await handle.dispose();
+      }
+    }
+
+    const [ra, rb] = await Promise.all([
+      getMapAndRect(request.params.uidA),
+      getMapAndRect(request.params.uidB),
+    ]);
+    const a = ra.map;
+    const b = rb.map;
+    const changed: Array<{property: string; before: string; after: string}> =
+      [];
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const k of keys) {
+      if (a[k] !== b[k]) {
+        changed.push({property: k, before: a[k] ?? '', after: b[k] ?? ''});
+      }
+    }
+    let geometryEqual: boolean | undefined;
+    if (request.params.compareGeometry) {
+      geometryEqual = borderRectsMatch(ra.rect, rb.rect);
+    }
+    const classification = classifyStyleDiff(changed, geometryEqual);
+    const out: Record<string, unknown> = {
+      styleChanges: changed,
+      ...classification,
+    };
+    if (request.params.compareGeometry) {
+      out.geometry = {
+        borderRectA: ra.rect,
+        borderRectB: rb.rect,
+        approximatelyEqual: geometryEqual,
+      };
+    }
+    response.appendResponseLine('Computed styles diff (A -> B):');
+    response.appendResponseLine('```json');
+    response.appendResponseLine(JSON.stringify(out));
+    response.appendResponseLine('```');
+  },
+});
+
+export const saveComputedStylesSnapshot = definePageTool({
+  name: 'save_computed_styles_snapshot',
+  description:
+    'Store baseline computed styles + domPath/meta under a name for ' +
+    'cross-navigation regression checks.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    name: z.string().describe('Snapshot name'),
+    uids: z
+      .array(z.string())
+      .describe(
+        'The uids of elements on the page from the page content snapshot',
+      ),
+    properties: z.array(z.string()).optional().describe('Optional filter list'),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    await context.ensureDomDomainEnabledForPage(pptr);
+    await context.ensureCssDomainEnabledForPage(pptr);
+    // @ts-expect-error internal API
+    const client = pptr._client();
+
+    const vpRes = await client.send('Runtime.evaluate', {
+      expression:
+        '({w:window.innerWidth,h:window.innerHeight,' +
+        'dpr:window.devicePixelRatio})',
+      returnByValue: true,
+    });
+    const vp = vpRes.result?.value as {w?: number; h?: number; dpr?: number};
+    const meta: StyleSnapshotMeta = {
+      capturedAt: new Date().toISOString(),
+      url: pptr.url(),
+      viewportWidth: Number(vp?.w ?? 0),
+      viewportHeight: Number(vp?.h ?? 0),
+      dpr: Number(vp?.dpr ?? 1) || 1,
+    };
+
+    const elements: Record<string, StyleSnapshotElement> = {};
+    await Promise.all(
+      request.params.uids.map(async uid => {
+        const handle = await request.page.getElementByUid(uid);
+        try {
+          const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+          const [computedRes, bmRes, domPathRes, descRes] = await Promise.all([
+            client.send('CSS.getComputedStyleForNode', {nodeId}),
+            client.send('DOM.getBoxModel', {nodeId}).catch(() => null),
+            domPathForHandle(handle).catch(() => undefined),
+            client.send('DOM.describeNode', {nodeId}).catch(() => null),
+          ]);
+          const map = toMap(
+            computedRes.computedStyle as
+              | Array<{name: string; value: string}>
+              | undefined,
+          );
+          let borderRect: BorderRect | undefined;
+          if (bmRes?.model?.border) {
+            borderRect = rectFromQuad(bmRes.model.border as number[]);
+          }
+          const domPath = domPathRes || undefined;
+          const backendNodeId =
+            (descRes?.node?.backendNodeId as number | undefined) ?? undefined;
+          elements[uid] = {
+            computed: filterMap(map, request.params.properties),
+            borderRect,
+            domPath,
+            backendNodeId,
+          };
+        } finally {
+          await handle.dispose();
+        }
+      }),
+    );
+
+    const data: StyleSnapshotData = {meta, elements};
+    const snapshots = getSnapshots(context as unknown as object);
+    snapshots.set(request.params.name, data);
+
+    response.appendResponseLine(
+      `Saved styles snapshot "${request.params.name}" for ` +
+        `${Object.keys(elements).length} elements (schema v1).`,
+    );
+    response.appendResponseLine('```json');
+    response.appendResponseLine(
+      JSON.stringify({
+        name: request.params.name,
+        schemaVersion: 1,
+        meta,
+        uids: Object.keys(elements),
+      }),
+    );
+    response.appendResponseLine('```');
+  },
+});
+
+export const diffComputedStylesSnapshot = definePageTool({
+  name: 'diff_computed_styles_snapshot',
+  description:
+    'Compare live uid to save_computed_styles_snapshot baseline; domPath ' +
+    'when uids differ between loads.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    name: z.string().describe('Snapshot name'),
+    uid: z
+      .string()
+      .describe('Element uid for the live node (from current snapshot)'),
+    domPath: z
+      .string()
+      .optional()
+      .describe(
+        'If baseline uid differs, match saved element by domPath from v1 snapshot.',
+      ),
+    properties: z.array(z.string()).optional().describe('Optional filter list'),
+    compareGeometry: z
+      .boolean()
+      .optional()
+      .describe('Compare border-box rects to detect effective layout change.'),
+  },
+  handler: async (request, response, context) => {
+    const snapshots = getSnapshots(context as unknown as object);
+    const snapshot = snapshots.get(request.params.name);
+    if (!snapshot) {
+      throw new Error('No snapshot found with the provided name');
+    }
+    const elems = snapshotElements(snapshot);
+    const baseline = resolveSnapshotElement(
+      elems,
+      request.params.uid,
+      request.params.domPath,
+    );
+    if (!baseline) {
+      throw new Error('No entry for the provided uid/domPath in the snapshot');
+    }
+    const baseMap = baseline.computed;
+
+    const pptr = request.page.pptrPage;
+    await context.ensureDomDomainEnabledForPage(pptr);
+    await context.ensureCssDomainEnabledForPage(pptr);
+    // @ts-expect-error internal API
+    const client = pptr._client();
+
+    const handle = await request.page.getElementByUid(request.params.uid);
+    try {
+      const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+      const {computedStyle} = await client.send('CSS.getComputedStyleForNode', {
+        nodeId,
+      });
+      const current = filterMap(
+        toMap(
+          computedStyle as Array<{name: string; value: string}> | undefined,
+        ),
+        request.params.properties,
+      );
+
+      const changed: Array<{property: string; before: string; after: string}> =
+        [];
+      const keys = new Set([...Object.keys(baseMap), ...Object.keys(current)]);
+      for (const k of keys) {
+        if (baseMap[k] !== current[k]) {
+          changed.push({
+            property: k,
+            before: baseMap[k] ?? '',
+            after: current[k] ?? '',
+          });
+        }
+      }
+
+      let geometryEqual: boolean | undefined;
+      let currentRect: BorderRect | undefined;
+      let liveQuad: number[] | null = null;
+      try {
+        const bm = await client.send('DOM.getBoxModel', {nodeId});
+        const flat = borderQuadToNumbers(bm.model?.border);
+        liveQuad = flat ? [...flat] : null;
+        if (bm.model?.border) {
+          currentRect = rectFromQuad(bm.model.border as number[]);
+        }
+      } catch {
+        void 0;
+      }
+      if (request.params.compareGeometry) {
+        geometryEqual = borderRectsMatch(baseline.borderRect, currentRect);
+      }
+
+      const classification = classifyStyleDiff(changed, geometryEqual);
+      const meta = snapshotMeta(snapshot);
+      const out: Record<string, unknown> = {
+        snapshotMeta: meta,
+        domPathBaseline: baseline.domPath,
+        styleChanges: changed,
+        overlay: {borderQuad: liveQuad},
+        ...classification,
+      };
+      if (request.params.compareGeometry) {
+        out.geometry = {
+          baselineBorderRect: baseline.borderRect,
+          currentBorderRect: currentRect,
+          approximatelyEqual: geometryEqual,
+        };
+      }
+      response.appendResponseLine(
+        `Computed styles diff vs snapshot "${request.params.name}" ` +
+          `(snapshot -> current):`,
+      );
+      response.appendResponseLine('```json');
+      response.appendResponseLine(JSON.stringify(out));
+      response.appendResponseLine('```');
+    } finally {
+      await handle.dispose();
+    }
+  },
+});
+
+export const highlightElementsForStyles = definePageTool({
+  name: 'highlight_elements_for_styles',
+  description:
+    'Highlight border quads in DevTools and return coordinates for ' +
+    'screenshot overlays or docs.',
+  annotations: {
+    category: ToolCategory.DEBUGGING,
+    readOnlyHint: true,
+  },
+  schema: {
+    uids: z
+      .array(z.string())
+      .min(1)
+      .describe('Element uids from the current page snapshot'),
+  },
+  handler: async (request, response, context) => {
+    const pptr = request.page.pptrPage;
+    await context.ensureDomDomainEnabledForPage(pptr);
+    // @ts-expect-error internal API
+    const client = pptr._client();
+    try {
+      await client.send('Overlay.enable');
+    } catch {
+      void 0;
+    }
+    const regions = await Promise.all(
+      request.params.uids.map(async uid => {
+        const handle = await request.page.getElementByUid(uid);
+        try {
+          const nodeId = await context.getNodeIdFromHandle(handle, pptr);
+          const flat = borderQuadToNumbers(
+            (await client.send('DOM.getBoxModel', {nodeId})).model?.border,
+          );
+          const quad = flat ? [...flat] : null;
+          if (quad) {
+            await client
+              .send('Overlay.highlightQuad', {quad})
+              .catch(() => undefined);
+          }
+          return {uid, borderQuad: quad};
+        } finally {
+          await handle.dispose();
+        }
+      }),
+    );
+    response.appendResponseLine('Highlight regions (border quads, layout px):');
+    response.appendResponseLine('```json');
+    response.appendResponseLine(JSON.stringify({regions}));
+    response.appendResponseLine('```');
+  },
+});
diff --git a/src/tools/tools.ts b/src/tools/tools.ts
index 3c74115c3..7c9bf6cd1 100644
--- a/src/tools/tools.ts
+++ b/src/tools/tools.ts
@@ -21,6 +21,7 @@ import * as screenshotTools from './screenshot.js';
 import * as scriptTools from './script.js';
 import * as slimTools from './slim/tools.js';
 import * as snapshotTools from './snapshot.js';
+import * as stylesTools from './styles.js';
 import type {ToolDefinition} from './ToolDefinition.js';
 
 export const createTools = (args: ParsedArguments) => {
@@ -41,6 +42,7 @@ export const createTools = (args: ParsedArguments) => {
         ...Object.values(screenshotTools),
         ...Object.values(scriptTools),
         ...Object.values(snapshotTools),
+        ...Object.values(stylesTools),
       ];
 
   const tools = [];
diff --git a/tests/browser.test.ts b/tests/browser.test.ts
index b0835bf96..6bf81e936 100644
--- a/tests/browser.test.ts
+++ b/tests/browser.test.ts
@@ -27,6 +27,7 @@ describe('browser', () => {
       userDataDir: folderPath,
       executablePath: executablePath(),
       devtools: false,
+      chromeArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
     });
     try {
       try {
@@ -36,6 +37,7 @@ describe('browser', () => {
           userDataDir: folderPath,
           executablePath: executablePath(),
           devtools: false,
+          chromeArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
         });
         await browser2.close();
         assert.fail('not reached');
@@ -63,6 +65,7 @@ describe('browser', () => {
         height: 801,
       },
       devtools: false,
+      chromeArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
     });
     try {
       const [page] = await browser.pages();
@@ -86,7 +89,11 @@ describe('browser', () => {
       userDataDir: folderPath,
       executablePath: executablePath(),
       devtools: false,
-      chromeArgs: ['--remote-debugging-port=0'],
+      chromeArgs: [
+        '--remote-debugging-port=0',
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+      ],
     });
     try {
       const connectedBrowser = await ensureBrowserConnected({
diff --git a/tests/e2e.styles.test.ts b/tests/e2e.styles.test.ts
new file mode 100644
index 000000000..ac87168eb
--- /dev/null
+++ b/tests/e2e.styles.test.ts
@@ -0,0 +1,226 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'node:assert';
+import {describe, it} from 'node:test';
+
+import {Client} from '@modelcontextprotocol/sdk/client/index.js';
+import {StdioClientTransport} from '@modelcontextprotocol/sdk/client/stdio.js';
+import {executablePath} from 'puppeteer';
+
+function extractJson(text: string): unknown {
+  const match = text.match(/```json\s*([\s\S]*?)\s*```/);
+  if (!match) {
+    throw new Error('No JSON block found in tool response');
+  }
+  return JSON.parse(match[1]);
+}
+
+async function withClient(cb: (client: Client) => Promise<void>) {
+  const transport = new StdioClientTransport({
+    command: 'node',
+    args: [
+      'build/src/bin/chrome-devtools-mcp.js',
+      '--headless',
+      '--isolated',
+      '--executable-path',
+      executablePath(),
+      '--no-usage-statistics',
+      '--chrome-arg=--no-sandbox',
+      '--chrome-arg=--disable-setuid-sandbox',
+    ],
+  });
+  const client = new Client(
+    {
+      name: 'e2e-styles',
+      version: '1.0.0',
+    },
+    {
+      capabilities: {},
+    },
+  );
+  try {
+    await client.connect(transport);
+    await cb(client);
+  } finally {
+    await client.close();
+  }
+}
+
+function findUidFromSnapshot(snapshotText: string, includes: string): string {
+  const lines = snapshotText.split('\n');
+  for (const line of lines) {
+    if (!line.includes('uid=')) {
+      continue;
+    }
+    if (line.includes(includes)) {
+      const m = line.match(/uid=(\d+_\d+)/);
+      if (m) {
+        return m[1];
+      }
+    }
+  }
+  throw new Error('UID not found in snapshot for: ' + includes);
+}
+
+describe('e2e styles', () => {
+  it('computed/box/visibility/batch/diff/snapshot flow', async () => {
+    await withClient(async client => {
+      const html = encodeURIComponent(`<!DOCTYPE html>
+<div role="button" aria-label="box" style="display:block;width:10px;height:10px">box</div>
+<span role="img" aria-label="icon">icon</span>`);
+
+      // Navigate via MCP
+      await client.callTool({
+        name: 'navigate_page',
+        arguments: {url: `data:text/html,${html}`},
+      });
+
+      // Snapshot and resolve UIDs
+      const snapRes = await client.callTool({
+        name: 'take_snapshot',
+        arguments: {},
+      });
+      const snapText = (snapRes as {content?: Array<{text?: string}>})
+        .content?.[0]?.text as string;
+      const uidBox = findUidFromSnapshot(snapText, 'button "box"');
+      const uidIcon = findUidFromSnapshot(snapText, 'image "icon"');
+
+      // get_computed_styles
+      const cs = await client.callTool({
+        name: 'get_computed_styles',
+        arguments: {uid: uidBox, properties: ['display'], includeSources: true},
+      });
+      const csParsed = extractJson(
+        (cs as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        computed: Record<string, string>;
+        sourceMap?: Record<string, unknown>;
+      };
+      assert.strictEqual(csParsed.computed.display, 'block');
+
+      // get_box_model
+      const bm = await client.callTool({
+        name: 'get_box_model',
+        arguments: {uid: uidBox},
+      });
+      const bmParsed = extractJson(
+        (bm as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        borderRect: {width: number};
+        contentRect: {width: number};
+      };
+      assert.ok(bmParsed.borderRect.width >= bmParsed.contentRect.width);
+
+      // get_visibility (first visible)
+      const vis1 = await client.callTool({
+        name: 'get_visibility',
+        arguments: {uid: uidBox},
+      });
+      const v1 = extractJson(
+        (vis1 as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        isVisible: boolean;
+      };
+      assert.strictEqual(v1.isVisible, true);
+
+      // Batch
+      const batch = await client.callTool({
+        name: 'get_computed_styles_batch',
+        arguments: {uids: [uidBox, uidIcon], properties: ['display']},
+      });
+      const batchParsed = extractJson(
+        (batch as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as Record<string, {display: string}>;
+      assert.strictEqual(batchParsed[uidBox].display, 'block');
+      assert.strictEqual(batchParsed[uidIcon].display, 'inline');
+
+      // Diff between two nodes
+      const diff = await client.callTool({
+        name: 'diff_computed_styles',
+        arguments: {uidA: uidBox, uidB: uidIcon, properties: ['display']},
+      });
+      const diffParsed = extractJson(
+        (diff as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        styleChanges: Array<{
+          property: string;
+          before: string;
+          after: string;
+        }>;
+      };
+      const displayChange = diffParsed.styleChanges.find(
+        d => d.property === 'display',
+      );
+      assert.ok(displayChange);
+      assert.strictEqual(displayChange?.before, 'block');
+      assert.strictEqual(displayChange?.after, 'inline');
+
+      // Save snapshot
+      await client.callTool({
+        name: 'save_computed_styles_snapshot',
+        arguments: {name: 'snap1', uids: [uidBox], properties: ['display']},
+      });
+
+      // Change display via evaluate_script
+      await client.callTool({
+        name: 'evaluate_script',
+        arguments: {
+          function: String((el: Element) => {
+            (el as HTMLElement).style.display = 'inline';
+            return true;
+          }),
+          args: [uidBox],
+        },
+      });
+
+      // Diff snapshot
+      const sdiff = await client.callTool({
+        name: 'diff_computed_styles_snapshot',
+        arguments: {name: 'snap1', uid: uidBox, properties: ['display']},
+      });
+      const sdiffParsed = extractJson(
+        (sdiff as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        styleChanges: Array<{
+          property: string;
+          before: string;
+          after: string;
+        }>;
+      };
+      const change = sdiffParsed.styleChanges.find(
+        d => d.property === 'display',
+      );
+      assert.ok(change);
+      assert.strictEqual(change?.before, 'block');
+      assert.strictEqual(change?.after, 'inline');
+
+      // Hide and check visibility false
+      await client.callTool({
+        name: 'evaluate_script',
+        arguments: {
+          function: String((el: Element) => {
+            (el as HTMLElement).style.display = 'none';
+            return true;
+          }),
+          args: [uidBox],
+        },
+      });
+      const vis2 = await client.callTool({
+        name: 'get_visibility',
+        arguments: {uid: uidBox},
+      });
+      const v2 = extractJson(
+        (vis2 as {content?: Array<{text?: string}>}).content?.[0]?.text || '',
+      ) as {
+        isVisible: boolean;
+        reasons: string[];
+      };
+      assert.strictEqual(v2.isVisible, false);
+      assert.ok(v2.reasons.includes('display:none'));
+    });
+  });
+});
diff --git a/tests/e2e/comparison/comparison-scenarios.test.ts b/tests/e2e/comparison/comparison-scenarios.test.ts
new file mode 100644
index 000000000..6756fc92b
--- /dev/null
+++ b/tests/e2e/comparison/comparison-scenarios.test.ts
@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'node:assert';
+import path from 'node:path';
+import {describe, it, before} from 'node:test';
+import {fileURLToPath} from 'node:url';
+
+import {generateAll} from './generate-fixtures.js';
+import {
+  extractJson,
+  findUid,
+  htmlFileAsDataUrl,
+  toolText,
+  withClient,
+} from './harness.js';
+import {SCENARIOS} from './scenarios-data.js';
+
+const dir = path.dirname(fileURLToPath(import.meta.url));
+
+/** Per-test: global runner uses --test-timeout=60000; each case spins up MCP. */
+const perTestMs = 180_000;
+
+describe('e2e comparison generated A/B pages', {timeout: 600_000}, () => {
+  before(
+    async () => {
+      await generateAll();
+    },
+    {timeout: 600_000},
+  );
+
+  for (const s of SCENARIOS) {
+    it(`diff combined ${s.id}`, {timeout: perTestMs}, async () => {
+      await withClient(async client => {
+        const url = await htmlFileAsDataUrl(
+          path.join(dir, 'generated/pairs', s.id, 'combined.html'),
+        );
+        await client.callTool({
+          name: 'navigate_page',
+          arguments: {url},
+        });
+        const snapRes = await client.callTool({
+          name: 'take_snapshot',
+          arguments: {},
+        });
+        const snap = toolText(snapRes);
+        const uidA = findUid(snap, 'variant-a');
+        const uidB = findUid(snap, 'variant-b');
+
+        const diffArgs: Record<string, unknown> = {
+          uidA,
+          uidB,
+          properties: [s.property],
+        };
+        if (s.compareGeometry) {
+          diffArgs.compareGeometry = true;
+        }
+        const diffRes = await client.callTool({
+          name: 'diff_computed_styles',
+          arguments: diffArgs,
+        });
+        const diff = extractJson(toolText(diffRes)) as {
+          styleChanges: Array<{
+            property: string;
+            before: string;
+            after: string;
+          }>;
+        };
+        const row = diff.styleChanges.find(x => x.property === s.property);
+        assert.ok(row, `missing ${s.property} in ${s.id}`);
+        assert.notStrictEqual(row?.before, row?.after);
+
+        const aRes = await client.callTool({
+          name: 'get_computed_styles',
+          arguments: {uid: uidA, properties: [s.property]},
+        });
+        const bRes = await client.callTool({
+          name: 'get_computed_styles',
+          arguments: {uid: uidB, properties: [s.property]},
+        });
+        const aj = extractJson(toolText(aRes)) as {
+          computed: Record<string, string>;
+        };
+        const bj = extractJson(toolText(bRes)) as {
+          computed: Record<string, string>;
+        };
+        assert.strictEqual(row?.before, aj.computed[s.property]);
+        assert.strictEqual(row?.after, bj.computed[s.property]);
+      });
+    });
+  }
+
+  it('sequential standalone A and B pages', {timeout: perTestMs}, async () => {
+    const sid = 'css-color';
+    const base = path.join(dir, 'generated/pairs', sid);
+    const ua = await htmlFileAsDataUrl(path.join(base, 'a.html'));
+    const ub = await htmlFileAsDataUrl(path.join(base, 'b.html'));
+
+    let ca: {computed: Record<string, string>};
+    await withClient(async client => {
+      await client.callTool({name: 'navigate_page', arguments: {url: ua}});
+      const snap = toolText(
+        await client.callTool({name: 'take_snapshot', arguments: {}}),
+      );
+      const uidA = findUid(snap, 'variant-a');
+      ca = extractJson(
+        toolText(
+          await client.callTool({
+            name: 'get_computed_styles',
+            arguments: {uid: uidA, properties: ['color']},
+          }),
+        ),
+      ) as {computed: Record<string, string>};
+    });
+
+    let cb: {computed: Record<string, string>};
+    await withClient(async client => {
+      await client.callTool({name: 'navigate_page', arguments: {url: ub}});
+      const snap = toolText(
+        await client.callTool({name: 'take_snapshot', arguments: {}}),
+      );
+      const uidB = findUid(snap, 'variant-b');
+      cb = extractJson(
+        toolText(
+          await client.callTool({
+            name: 'get_computed_styles',
+            arguments: {uid: uidB, properties: ['color']},
+          }),
+        ),
+      ) as {computed: Record<string, string>};
+    });
+
+    assert.notStrictEqual(ca!.computed.color, cb!.computed.color);
+  });
+
+  it(
+    'save and diff_computed_styles_snapshot on generated page',
+    {timeout: perTestMs},
+    async () => {
+      await withClient(async client => {
+        const url = await htmlFileAsDataUrl(
+          path.join(dir, 'generated/pairs', 'css-width', 'combined.html'),
+        );
+        await client.callTool({name: 'navigate_page', arguments: {url}});
+        const snap = toolText(
+          await client.callTool({name: 'take_snapshot', arguments: {}}),
+        );
+        const uidA = findUid(snap, 'variant-a');
+        await client.callTool({
+          name: 'save_computed_styles_snapshot',
+          arguments: {
+            name: 'fsnap-width',
+            uids: [uidA],
+            properties: ['width'],
+          },
+        });
+        await client.callTool({
+          name: 'evaluate_script',
+          arguments: {
+            function: String((el: Element) => {
+              (el as HTMLElement).style.setProperty(
+                'width',
+                '200px',
+                'important',
+              );
+              return true;
+            }),
+            args: [uidA],
+          },
+        });
+        const diffRes = await client.callTool({
+          name: 'diff_computed_styles_snapshot',
+          arguments: {
+            name: 'fsnap-width',
+            uid: uidA,
+            properties: ['width'],
+          },
+        });
+        const dj = extractJson(toolText(diffRes)) as {
+          styleChanges: Array<{
+            property: string;
+            before: string;
+            after: string;
+          }>;
+        };
+        const ch = dj.styleChanges.find(x => x.property === 'width');
+        assert.ok(ch);
+        assert.notStrictEqual(ch?.before, ch?.after);
+      });
+    },
+  );
+});
diff --git a/tests/e2e/comparison/fixtures/tool-smoke-asset.txt b/tests/e2e/comparison/fixtures/tool-smoke-asset.txt
new file mode 100644
index 000000000..9766475a4
--- /dev/null
+++ b/tests/e2e/comparison/fixtures/tool-smoke-asset.txt
@@ -0,0 +1 @@
+ok
diff --git a/tests/e2e/comparison/fixtures/tool-smoke.html b/tests/e2e/comparison/fixtures/tool-smoke.html
new file mode 100644
index 000000000..fdd6888ef
--- /dev/null
+++ b/tests/e2e/comparison/fixtures/tool-smoke.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>tool-smoke</title>
+  </head>
+  <body>
+    <button
+      type="button"
+      aria-label="go-smoke"
+      >Go</button
+    >
+    <input
+      type="text"
+      aria-label="field-smoke"
+      id="field-smoke"
+    />
+    <a
+      href="./tool-smoke-asset.txt"
+      aria-label="fetch-smoke"
+      >load</a
+    >
+    <script>
+      console.log('smoke-log');
+    </script>
+  </body>
+</html>
diff --git a/tests/e2e/comparison/generate-fixtures.ts b/tests/e2e/comparison/generate-fixtures.ts
new file mode 100644
index 000000000..6ff11aa43
--- /dev/null
+++ b/tests/e2e/comparison/generate-fixtures.ts
@@ -0,0 +1,227 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {mkdir, rm, writeFile} from 'node:fs/promises';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+import {SCENARIOS, type Scenario} from './scenarios-data.js';
+
+const IMG_SRC =
+  'data:image/gif;base64,' +
+  'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+const BASE_BTN = `
+.variant-a, .variant-b {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 2px 8px;
+  margin: 0;
+  font: 14px system-ui, sans-serif;
+  border: 1px solid #777;
+  vertical-align: top;
+}
+`;
+
+function deepWrap(inner: string, depth: number): string {
+  let out = inner;
+  for (let i = 0; i < depth; i++) {
+    out = `<div class="deep-${i}">${out}</div>`;
+  }
+  return out;
+}
+
+function noiseBlock(n: number): string {
+  if (n <= 0) {
+    return '';
+  }
+  const parts: string[] = [];
+  for (let i = 0; i < n; i++) {
+    parts.push('<div class="noise" aria-hidden="true"></div>');
+  }
+  return parts.join('');
+}
+
+function buttonPair(): string {
+  return `
+<button type="button" class="variant-a" aria-label="variant-a"></button>
+<button type="button" class="variant-b" aria-label="variant-b"></button>`;
+}
+
+function imgPair(): string {
+  return `
+<img class="variant-a" role="img" aria-label="variant-a" alt="" src="${IMG_SRC}" width="48" height="48"/>
+<img class="variant-b" role="img" aria-label="variant-b" alt="" src="${IMG_SRC}" width="48" height="48"/>`;
+}
+
+function flexHostPair(s: Scenario): string {
+  return `
+<div role="button" tabindex="0" aria-label="variant-a" class="host-a" style="${
+    s.cssA
+  }">
+  <span>a</span><span>b</span>
+</div>
+<div role="button" tabindex="0" aria-label="variant-b" class="host-b" style="${
+    s.cssB
+  }">
+  <span>a</span><span>b</span>
+</div>`;
+}
+
+const BASE_IMG = `
+img.variant-a, img.variant-b {
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  vertical-align: top;
+}
+`;
+
+function styleBlock(s: Scenario): string {
+  const head = (s.extraHead ?? '').trim();
+  if (s.body === 'flex-host') {
+    return `
+<style>
+${head}
+</style>`;
+  }
+  if (s.body === 'img') {
+    return `
+<style>
+${BASE_IMG}
+.variant-a { ${s.cssA} }
+.variant-b { ${s.cssB} }
+${head}
+</style>`;
+  }
+  return `
+<style>
+${BASE_BTN}
+.variant-a { ${s.cssA} }
+.variant-b { ${s.cssB} }
+${head}
+</style>`;
+}
+
+function bodyInner(s: Scenario): string {
+  const noise = noiseBlock(s.noiseSiblings ?? 0);
+  let core: string;
+  switch (s.body) {
+    case 'img':
+      core = imgPair();
+      break;
+    case 'flex-host':
+      core = flexHostPair(s);
+      break;
+    case 'wrap':
+      core = `<div class="wrap">${buttonPair()}</div>`;
+      break;
+    case 'grid-host':
+      core = `<div class="grid-host">${buttonPair()}</div>`;
+      break;
+    default:
+      core = buttonPair();
+  }
+  return noise + deepWrap(core, s.bodyDepth ?? 0);
+}
+
+function renderCombined(s: Scenario): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<title>${s.id}</title>
+${styleBlock(s)}
+</head>
+<body>
+${bodyInner(s)}
+</body>
+</html>
+`;
+}
+
+function renderStandalone(s: Scenario, variant: 'a' | 'b'): string {
+  const css = variant === 'a' ? s.cssA : s.cssB;
+  const label = variant === 'a' ? 'variant-a' : 'variant-b';
+  const cls = variant === 'a' ? 'variant-a' : 'variant-b';
+  if (s.body === 'img') {
+    return `<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"/>
+<title>${s.id}-${variant}</title>
+<style>
+img { display: inline-block; vertical-align: top; }
+.${cls} { ${css} }
+</style></head><body>
+<img class="${cls}" role="img" aria-label="${label}" alt="" src="${IMG_SRC}" width="48" height="48"/>
+</body></html>`;
+  }
+  if (s.body === 'flex-host') {
+    return `<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"/>
+<title>${s.id}-${variant}</title>
+<style></style></head><body>
+<div role="button" tabindex="0" aria-label="${label}" style="${css}">
+<span>x</span></div>
+</body></html>`;
+  }
+  const innerBtn = `
+<button type="button" class="${cls}" aria-label="${label}"></button>`;
+  const wrapped =
+    s.body === 'grid-host'
+      ? `<div class="grid-host">${innerBtn}</div>`
+      : s.body === 'wrap'
+        ? `<div class="wrap">${innerBtn}</div>`
+        : innerBtn;
+  return `<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"/>
+<title>${s.id}-${variant}</title>
+<style>
+${BASE_BTN}
+.${cls} { ${css} }
+${(s.extraHead ?? '').trim()}
+</style></head><body>
+${wrapped}
+</body></html>`;
+}
+
+export async function generateAll(): Promise<void> {
+  const dir = path.dirname(fileURLToPath(import.meta.url));
+  const root = path.join(dir, 'generated');
+  await rm(root, {recursive: true, force: true});
+  const pairs = path.join(root, 'pairs');
+
+  const BATCH = 20;
+  for (let i = 0; i < SCENARIOS.length; i += BATCH) {
+    const batch = SCENARIOS.slice(i, i + BATCH);
+    await Promise.all(
+      batch.map(async s => {
+        const sub = path.join(pairs, s.id);
+        await mkdir(sub, {recursive: true});
+        await Promise.all([
+          writeFile(path.join(sub, 'combined.html'), renderCombined(s)),
+          writeFile(path.join(sub, 'a.html'), renderStandalone(s, 'a')),
+          writeFile(path.join(sub, 'b.html'), renderStandalone(s, 'b')),
+        ]);
+      }),
+    );
+  }
+}
+
+async function main(): Promise<void> {
+  await generateAll();
+  console.error(
+    `Wrote ${SCENARIOS.length} fixture triples under generated/pairs`,
+  );
+}
+
+const selfPath = fileURLToPath(import.meta.url);
+if (process.argv[1] === selfPath) {
+  main().catch(e => {
+    console.error(e);
+    process.exit(1);
+  });
+}
diff --git a/tests/e2e/comparison/harness.ts b/tests/e2e/comparison/harness.ts
new file mode 100644
index 000000000..ff8e898c3
--- /dev/null
+++ b/tests/e2e/comparison/harness.ts
@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {readFile} from 'node:fs/promises';
+
+import {Client} from '@modelcontextprotocol/sdk/client/index.js';
+import {StdioClientTransport} from '@modelcontextprotocol/sdk/client/stdio.js';
+import {executablePath} from 'puppeteer';
+
+export async function connectComparisonClient(
+  extraArgs: string[] = [],
+): Promise<{client: Client; transport: StdioClientTransport}> {
+  const transport = new StdioClientTransport({
+    command: 'node',
+    args: [
+      'build/src/bin/chrome-devtools-mcp.js',
+      '--headless',
+      '--isolated',
+      '--executable-path',
+      executablePath(),
+      '--no-usage-statistics',
+      '--no-performance-crux',
+      '--chrome-arg=--no-sandbox',
+      '--chrome-arg=--disable-setuid-sandbox',
+      ...extraArgs,
+    ],
+  });
+  const client = new Client(
+    {name: 'e2e-comparison', version: '1.0.0'},
+    {capabilities: {}},
+  );
+  await client.connect(transport);
+  return {client, transport};
+}
+
+export function extractJson(text: string): unknown {
+  const match = text.match(/```json\s*([\s\S]*?)\s*```/);
+  if (!match) {
+    throw new Error('No JSON block in tool response');
+  }
+  return JSON.parse(match[1]);
+}
+
+export function toolText(res: unknown): string {
+  const r = res as {content?: Array<{text?: string}>};
+  return (r.content?.[0]?.text as string) ?? '';
+}
+
+export function findUid(snapshotText: string, needle: string): string {
+  const lines = snapshotText.split('\n');
+  for (const line of lines) {
+    if (!line.includes('uid=') || !line.includes(needle)) {
+      continue;
+    }
+    if (line.includes('RootWebArea')) {
+      continue;
+    }
+    const m = line.match(/uid=(\d+_\d+)/);
+    if (m) {
+      return m[1];
+    }
+  }
+  throw new Error('UID not found for: ' + needle);
+}
+
+const dataUrlCache = new Map<string, string>();
+
+export async function htmlFileAsDataUrl(absolutePath: string): Promise<string> {
+  const cached = dataUrlCache.get(absolutePath);
+  if (cached) {
+    return cached;
+  }
+  const raw = await readFile(absolutePath, 'utf8');
+  const url = `data:text/html;charset=utf-8,${encodeURIComponent(raw)}`;
+  dataUrlCache.set(absolutePath, url);
+  return url;
+}
+
+export async function withClient(
+  cb: (client: Client) => Promise<void>,
+  extraArgs: string[] = [],
+): Promise<void> {
+  const {client} = await connectComparisonClient(extraArgs);
+  try {
+    await cb(client);
+  } finally {
+    await client.close();
+  }
+}
diff --git a/tests/e2e/comparison/mcp-tool-coverage.test.ts b/tests/e2e/comparison/mcp-tool-coverage.test.ts
new file mode 100644
index 000000000..2842c5377
--- /dev/null
+++ b/tests/e2e/comparison/mcp-tool-coverage.test.ts
@@ -0,0 +1,203 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'node:assert';
+import path from 'node:path';
+import {describe, it} from 'node:test';
+
+import {
+  extractJson,
+  findUid,
+  htmlFileAsDataUrl,
+  toolText,
+  withClient,
+} from './harness.js';
+
+const smokeHtml = path.join(
+  process.cwd(),
+  'tests/e2e/comparison/fixtures/tool-smoke.html',
+);
+
+describe('e2e MCP tool coverage (default server)', {timeout: 120_000}, () => {
+  it('pages, navigation, snapshot, console, network', async () => {
+    await withClient(async client => {
+      const url = await htmlFileAsDataUrl(smokeHtml);
+      await client.callTool({name: 'list_pages', arguments: {}});
+      await client.callTool({name: 'navigate_page', arguments: {url}});
+      await client.callTool({
+        name: 'resize_page',
+        arguments: {width: 900, height: 700},
+      });
+      const snap = toolText(
+        await client.callTool({name: 'take_snapshot', arguments: {}}),
+      );
+      const uidGo = findUid(snap, 'go-smoke');
+      await client.callTool({
+        name: 'wait_for',
+        arguments: {text: ['go-smoke'], timeout: 5000},
+      });
+      await client.callTool({
+        name: 'list_console_messages',
+        arguments: {},
+      });
+      await client.callTool({
+        name: 'list_network_requests',
+        arguments: {},
+      });
+      await client.callTool({
+        name: 'take_screenshot',
+        arguments: {format: 'png'},
+      });
+      await client.callTool({
+        name: 'emulate',
+        arguments: {viewport: {width: 800, height: 600}},
+      });
+      await client.callTool({
+        name: 'click',
+        arguments: {uid: uidGo},
+      });
+      await client.callTool({
+        name: 'hover',
+        arguments: {uid: uidGo},
+      });
+      const fieldUid = findUid(
+        toolText(await client.callTool({name: 'take_snapshot', arguments: {}})),
+        'field-smoke',
+      );
+      await client.callTool({
+        name: 'fill',
+        arguments: {uid: fieldUid, value: 'x'},
+      });
+      await client.callTool({
+        name: 'type_text',
+        arguments: {uid: fieldUid, text: 'y'},
+      });
+      await client.callTool({
+        name: 'press_key',
+        arguments: {key: 'Enter'},
+      });
+    });
+  });
+
+  it(
+    'styles, geometry, performance, memory, lighthouse',
+    {timeout: 120_000},
+    async () => {
+      await withClient(async client => {
+        const url = await htmlFileAsDataUrl(smokeHtml);
+        await client.callTool({name: 'navigate_page', arguments: {url}});
+        const snap = toolText(
+          await client.callTool({name: 'take_snapshot', arguments: {}}),
+        );
+        const uid = findUid(snap, 'go-smoke');
+        const cs = extractJson(
+          toolText(
+            await client.callTool({
+              name: 'get_computed_styles',
+              arguments: {uid, properties: ['display'], includeSources: true},
+            }),
+          ),
+        ) as {computed: Record<string, string>};
+        assert.ok(cs.computed.display);
+
+        const batch = extractJson(
+          toolText(
+            await client.callTool({
+              name: 'get_computed_styles_batch',
+              arguments: {uids: [uid], properties: ['display']},
+            }),
+          ),
+        ) as Record<string, {display: string}>;
+        assert.ok(Object.keys(batch).length >= 1);
+
+        extractJson(
+          toolText(
+            await client.callTool({name: 'get_box_model', arguments: {uid}}),
+          ),
+        );
+
+        extractJson(
+          toolText(
+            await client.callTool({name: 'get_visibility', arguments: {uid}}),
+          ),
+        );
+
+        const snap2 = toolText(
+          await client.callTool({name: 'take_snapshot', arguments: {}}),
+        );
+        const uidField = findUid(snap2, 'field-smoke');
+        extractJson(
+          toolText(
+            await client.callTool({
+              name: 'diff_computed_styles',
+              arguments: {uidA: uid, uidB: uidField, properties: ['display']},
+            }),
+          ),
+        );
+
+        await client.callTool({
+          name: 'save_computed_styles_snapshot',
+          arguments: {name: 'cov-snap', uids: [uid], properties: ['display']},
+        });
+        extractJson(
+          toolText(
+            await client.callTool({
+              name: 'diff_computed_styles_snapshot',
+              arguments: {name: 'cov-snap', uid, properties: ['display']},
+            }),
+          ),
+        );
+
+        await client.callTool({
+          name: 'highlight_elements_for_styles',
+          arguments: {uids: [uid]},
+        });
+
+        await client.callTool({
+          name: 'performance_start_trace',
+          arguments: {reload: false},
+        });
+        await client.callTool({
+          name: 'performance_stop_trace',
+          arguments: {},
+        });
+
+        await client.callTool({
+          name: 'lighthouse_audit',
+          arguments: {mode: 'snapshot', device: 'desktop'},
+        });
+
+        await client.callTool({name: 'take_memory_snapshot', arguments: {}});
+      });
+    },
+  );
+
+  it('new_page lists additional tab', async () => {
+    await withClient(async client => {
+      const url = await htmlFileAsDataUrl(smokeHtml);
+      await client.callTool({name: 'navigate_page', arguments: {url}});
+      const np = await client.callTool({
+        name: 'new_page',
+        arguments: {url: 'about:blank'},
+      });
+      assert.ok(toolText(np).length > 0);
+      const pages = await client.callTool({name: 'list_pages', arguments: {}});
+      assert.ok(toolText(pages).length > 0);
+    });
+  });
+});
+
+describe('e2e MCP tool coverage (interop flags)', () => {
+  it('get_tab_id', async () => {
+    await withClient(
+      async client => {
+        const r = await client.callTool({name: 'get_tab_id', arguments: {}});
+        assert.ok(toolText(r).length > 0);
+      },
+      ['--experimental-interop-tools'],
+    );
+  });
+});
diff --git a/tests/e2e/comparison/scenarios-data.ts b/tests/e2e/comparison/scenarios-data.ts
new file mode 100644
index 000000000..66a456384
--- /dev/null
+++ b/tests/e2e/comparison/scenarios-data.ts
@@ -0,0 +1,406 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type ScenarioBody =
+  | 'buttons'
+  | 'img'
+  | 'flex-host'
+  | 'wrap'
+  | 'grid-host';
+
+export interface Scenario {
+  id: string;
+  property: string;
+  cssA: string;
+  cssB: string;
+  extraHead?: string;
+  bodyDepth?: number;
+  noiseSiblings?: number;
+  body?: ScenarioBody;
+  compareGeometry?: boolean;
+}
+
+function pushSimple(
+  out: Scenario[],
+  id: string,
+  property: string,
+  valA: string,
+  valB: string,
+  extra?: Partial<Scenario>,
+): void {
+  out.push({
+    id,
+    property,
+    cssA: `${property}: ${valA}`,
+    cssB: `${property}: ${valB}`,
+    ...extra,
+  });
+}
+
+function buildSpacingSizeBorder(out: Scenario[]): void {
+  const marginSides = [
+    ['margin-top', '2px', '12px'],
+    ['margin-right', '2px', '12px'],
+    ['margin-bottom', '2px', '12px'],
+    ['margin-left', '2px', '12px'],
+  ] as const;
+  for (const [p, a, b] of marginSides) {
+    pushSimple(out, `css-${p}`, p, a, b);
+  }
+  pushSimple(out, 'css-margin-shorthand', 'margin-top', '4px', '20px', {
+    cssA: 'margin: 4px',
+    cssB: 'margin: 20px',
+  });
+
+  const padSides = [
+    ['padding-top', '2px', '14px'],
+    ['padding-right', '2px', '14px'],
+    ['padding-bottom', '2px', '14px'],
+    ['padding-left', '2px', '14px'],
+  ] as const;
+  for (const [p, a, b] of padSides) {
+    pushSimple(out, `css-${p}`, p, a, b);
+  }
+  pushSimple(out, 'css-padding-shorthand', 'padding-top', '3px', '18px', {
+    cssA: 'padding: 3px',
+    cssB: 'padding: 18px',
+  });
+
+  pushSimple(out, 'css-width', 'width', '80px', '120px');
+  pushSimple(out, 'css-height', 'height', '24px', '48px');
+  pushSimple(out, 'css-min-width', 'min-width', '0px', '60px');
+  pushSimple(out, 'css-max-width', 'max-width', '200px', '80px');
+  pushSimple(out, 'css-min-height', 'min-height', '0px', '40px');
+  pushSimple(out, 'css-max-height', 'max-height', '200px', '50px');
+
+  pushSimple(out, 'css-border-width', 'border-top-width', '1px', '6px');
+  pushSimple(out, 'css-border-style', 'border-top-style', 'solid', 'dashed');
+  pushSimple(
+    out,
+    'css-border-color',
+    'border-top-color',
+    'rgb(0, 128, 0)',
+    'rgb(128, 0, 128)',
+  );
+  pushSimple(out, 'css-border-radius', 'border-top-left-radius', '0px', '16px');
+  pushSimple(
+    out,
+    'css-border-top-left-radius',
+    'border-top-left-radius',
+    '0px',
+    '12px',
+  );
+  pushSimple(out, 'css-outline-width', 'outline-width', '0px', '3px', {
+    cssA: 'outline-style: solid; outline-width: 0px; outline-color: rgb(0, 0, 0)',
+    cssB: 'outline-style: solid; outline-width: 3px; outline-color: rgb(0, 0, 0)',
+  });
+  pushSimple(out, 'css-outline-style', 'outline-style', 'none', 'solid');
+  pushSimple(
+    out,
+    'css-outline-color',
+    'outline-color',
+    'rgb(255, 0, 0)',
+    'rgb(0, 0, 255)',
+  );
+}
+
+function buildTypographyColors(out: Scenario[]): void {
+  pushSimple(out, 'css-font-size', 'font-size', '12px', '22px');
+  pushSimple(out, 'css-line-height', 'line-height', '16px', '28px');
+  pushSimple(out, 'css-letter-spacing', 'letter-spacing', 'normal', '4px');
+  pushSimple(out, 'css-word-spacing', 'word-spacing', 'normal', '8px');
+  pushSimple(out, 'css-font-weight', 'font-weight', '400', '700');
+  pushSimple(out, 'css-font-style', 'font-style', 'normal', 'italic');
+  pushSimple(out, 'css-font-family', 'font-family', 'serif', 'monospace');
+  pushSimple(
+    out,
+    'css-text-decoration-line',
+    'text-decoration-line',
+    'none',
+    'underline',
+  );
+  pushSimple(out, 'css-text-transform', 'text-transform', 'none', 'uppercase');
+  pushSimple(out, 'css-overflow-wrap', 'overflow-wrap', 'normal', 'anywhere');
+  pushSimple(out, 'css-color', 'color', 'rgb(10, 10, 10)', 'rgb(200, 50, 50)');
+  pushSimple(
+    out,
+    'css-background-color',
+    'background-color',
+    'rgb(240, 240, 240)',
+    'rgb(20, 40, 200)',
+  );
+  pushSimple(out, 'css-opacity', 'opacity', '1', '0.35');
+  pushSimple(out, 'css-outline-offset', 'outline-offset', '0px', '6px');
+}
+
+function buildLayoutPosition(out: Scenario[]): void {
+  pushSimple(out, 'css-display', 'display', 'inline-block', 'block');
+  out.push({
+    id: 'css-position-offset',
+    property: 'top',
+    cssA: 'position: relative; top: 0px; left: 0px',
+    cssB: 'position: relative; top: 8px; left: 6px',
+  });
+  pushSimple(out, 'css-float', 'float', 'none', 'left');
+  pushSimple(out, 'css-clear', 'clear', 'none', 'both');
+  pushSimple(out, 'css-z-index', 'z-index', '1', '50');
+  pushSimple(out, 'css-overflow', 'overflow-x', 'visible', 'hidden', {
+    cssA: 'overflow-x: visible; overflow-y: visible',
+    cssB: 'overflow-x: hidden; overflow-y: visible',
+  });
+  pushSimple(out, 'css-box-sizing', 'box-sizing', 'content-box', 'border-box');
+  pushSimple(out, 'css-aspect-ratio', 'aspect-ratio', 'auto', '2 / 1');
+  pushSimple(
+    out,
+    'css-writing-mode',
+    'writing-mode',
+    'horizontal-tb',
+    'vertical-rl',
+  );
+}
+
+function buildFlexGrid(out: Scenario[]): void {
+  pushSimple(out, 'css-flex-grow', 'flex-grow', '0', '2');
+  pushSimple(out, 'css-flex-shrink', 'flex-shrink', '1', '0');
+  pushSimple(out, 'css-flex-basis', 'flex-basis', 'auto', '40px');
+  pushSimple(out, 'css-align-self', 'align-self', 'auto', 'flex-end');
+  pushSimple(out, 'css-order', 'order', '0', '3');
+  out.push({
+    id: 'css-grid-column-start',
+    property: 'grid-column-start',
+    cssA: 'grid-column-start: auto',
+    cssB: 'grid-column-start: 1',
+    extraHead: `
+      .grid-host {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+    `,
+    body: 'grid-host',
+  });
+}
+
+function buildTransformsEffects(out: Scenario[]): void {
+  pushSimple(out, 'css-transform', 'transform', 'none', 'rotate(8deg)');
+  pushSimple(out, 'css-transform-scale', 'transform', 'none', 'scale(1.15)');
+  pushSimple(
+    out,
+    'css-transform-translate',
+    'transform',
+    'none',
+    'translate(4px, 3px)',
+  );
+  pushSimple(
+    out,
+    'css-box-shadow',
+    'box-shadow',
+    'none',
+    '4px 4px 8px rgba(0,0,0,0.35)',
+  );
+  pushSimple(
+    out,
+    'css-text-shadow',
+    'text-shadow',
+    'none',
+    '2px 2px 4px rgba(0,0,0,0.5)',
+  );
+  pushSimple(out, 'css-filter', 'filter', 'none', 'brightness(0.85)');
+}
+
+function buildLogicalUnits(out: Scenario[]): void {
+  pushSimple(out, 'css-inline-size', 'inline-size', '70px', '110px');
+  pushSimple(out, 'css-block-size', 'block-size', '22px', '44px');
+  pushSimple(
+    out,
+    'css-margin-inline-start',
+    'margin-inline-start',
+    '2px',
+    '18px',
+  );
+  out.push({
+    id: 'css-inset',
+    property: 'top',
+    cssA: 'position: relative; inset: 0px',
+    cssB: 'position: relative; inset: 4px 6px 2px 8px',
+  });
+  pushSimple(out, 'css-rem-vs-px', 'width', '5rem', '120px');
+}
+
+function buildLayersAndVars(out: Scenario[]): void {
+  out.push({
+    id: 'css-layer-order',
+    property: 'color',
+    cssA: '',
+    cssB: 'color: rgb(0, 0, 255)',
+    extraHead: `
+      @layer base, theme;
+      @layer theme { .variant-a { color: rgb(200, 0, 0); } }
+      @layer base { .variant-a { color: rgb(0, 180, 0); } }
+    `,
+  });
+  out.push({
+    id: 'css-custom-prop-diff',
+    property: 'color',
+    cssA: '--x: rgb(50, 50, 50); color: var(--x)',
+    cssB: '--x: rgb(200, 100, 100); color: var(--x)',
+  });
+}
+
+function buildDomScale(out: Scenario[]): void {
+  pushSimple(out, 'dom-depth-12', 'border-top-width', '1px', '5px', {
+    bodyDepth: 12,
+  });
+  pushSimple(out, 'dom-depth-28', 'border-top-width', '1px', '5px', {
+    bodyDepth: 28,
+  });
+  pushSimple(out, 'dom-noise-siblings-40', 'font-size', '13px', '19px', {
+    noiseSiblings: 40,
+  });
+  pushSimple(out, 'dom-noise-siblings-200', 'font-size', '13px', '19px', {
+    noiseSiblings: 200,
+  });
+}
+
+function buildImgBody(out: Scenario[]): void {
+  pushSimple(out, 'img-object-fit', 'object-fit', 'fill', 'cover', {
+    body: 'img',
+    property: 'object-fit',
+  });
+  pushSimple(out, 'img-opacity', 'opacity', '1', '0.4', {
+    body: 'img',
+  });
+  pushSimple(out, 'img-transform', 'transform', 'none', 'rotate(12deg)', {
+    body: 'img',
+  });
+}
+
+function buildFlexHost(out: Scenario[]): void {
+  out.push({
+    id: 'flex-host-gap-row',
+    property: 'row-gap',
+    cssA: 'display: flex; flex-wrap: wrap; row-gap: 4px; width: 120px',
+    cssB: 'display: flex; flex-wrap: wrap; row-gap: 28px; width: 120px',
+    body: 'flex-host',
+  });
+  out.push({
+    id: 'flex-host-column-gap',
+    property: 'column-gap',
+    cssA: 'display: flex; column-gap: 2px',
+    cssB: 'display: flex; column-gap: 24px',
+    body: 'flex-host',
+  });
+}
+
+function buildGeometryFlag(out: Scenario[]): void {
+  pushSimple(out, 'geom-compare-width', 'width', '60px', '100px', {
+    compareGeometry: true,
+  });
+  pushSimple(out, 'geom-compare-padding', 'padding-top', '4px', '20px', {
+    compareGeometry: true,
+    cssA: 'padding: 4px',
+    cssB: 'padding: 20px',
+  });
+}
+
+function buildScssCompiledComment(out: Scenario[]): void {
+  out.push({
+    id: 'scss-compiled-nested',
+    property: 'color',
+    cssA: 'color: rgb(90, 90, 200)',
+    cssB: 'color: rgb(200, 90, 90)',
+    extraHead: `
+      /* expanded from SCSS nesting */
+    `,
+    body: 'wrap',
+  });
+}
+
+function buildEquivalentUnits(out: Scenario[]): void {
+  pushSimple(out, 'unit-em-font-size', 'font-size', '1em', '1.5em');
+  pushSimple(out, 'unit-pct-width', 'width', '40%', '65%');
+  pushSimple(out, 'unit-ch-width', 'width', '12ch', '20ch');
+}
+
+function buildMoreSurface(out: Scenario[]): void {
+  pushSimple(out, 'css-text-align', 'text-align', 'left', 'right');
+  pushSimple(out, 'css-vertical-align', 'vertical-align', 'baseline', 'super');
+  pushSimple(out, 'css-border-right-width', 'border-right-width', '1px', '9px');
+  pushSimple(
+    out,
+    'css-border-bottom-width',
+    'border-bottom-width',
+    '1px',
+    '9px',
+  );
+  pushSimple(out, 'css-overflow-x', 'overflow-x', 'visible', 'scroll');
+  pushSimple(out, 'css-overflow-y', 'overflow-y', 'visible', 'auto');
+  pushSimple(out, 'css-user-select', 'user-select', 'auto', 'none');
+  pushSimple(out, 'css-pointer-events', 'pointer-events', 'auto', 'none');
+  pushSimple(out, 'css-cursor', 'cursor', 'default', 'pointer');
+  pushSimple(out, 'css-isolation', 'isolation', 'auto', 'isolate');
+  pushSimple(out, 'css-mix-blend-mode', 'mix-blend-mode', 'normal', 'multiply');
+  pushSimple(out, 'css-scroll-margin-top', 'scroll-margin-top', '0px', '12px');
+  pushSimple(out, 'css-column-count', 'column-count', 'auto', '2');
+  pushSimple(out, 'css-flex-direction', 'flex-direction', 'row', 'column', {
+    extraHead: `
+      .variant-a, .variant-b { display: flex; }
+    `,
+  });
+  pushSimple(
+    out,
+    'css-justify-content',
+    'justify-content',
+    'flex-start',
+    'flex-end',
+    {
+      extraHead: `
+      .variant-a, .variant-b { display: flex; width: 140px; }
+    `,
+    },
+  );
+  pushSimple(out, 'css-align-items', 'align-items', 'stretch', 'center', {
+    extraHead: `
+      .variant-a, .variant-b { display: flex; height: 48px; }
+    `,
+  });
+  pushSimple(out, 'css-row-gap-flex', 'row-gap', '2px', '18px', {
+    extraHead: `
+      .variant-a, .variant-b { display: flex; flex-wrap: wrap; width: 100px; }
+    `,
+  });
+  pushSimple(out, 'css-border-top-width', 'border-top-width', '1px', '7px');
+  pushSimple(out, 'css-border-left-width', 'border-left-width', '1px', '7px');
+  pushSimple(out, 'css-text-indent', 'text-indent', '0px', '12px');
+}
+
+export function buildScenarios(): Scenario[] {
+  const out: Scenario[] = [];
+  buildSpacingSizeBorder(out);
+  buildTypographyColors(out);
+  buildLayoutPosition(out);
+  buildFlexGrid(out);
+  buildTransformsEffects(out);
+  buildLogicalUnits(out);
+  buildLayersAndVars(out);
+  buildDomScale(out);
+  buildImgBody(out);
+  buildFlexHost(out);
+  buildGeometryFlag(out);
+  buildScssCompiledComment(out);
+  buildEquivalentUnits(out);
+  buildMoreSurface(out);
+
+  const ids = new Set(out.map(s => s.id));
+  if (ids.size !== out.length) {
+    throw new Error('duplicate scenario id');
+  }
+  if (out.length < 100) {
+    throw new Error(`need at least 100 scenarios, got ${out.length}`);
+  }
+  return out;
+}
+
+export const SCENARIOS: Scenario[] = buildScenarios();
diff --git a/tests/index.test.ts b/tests/index.test.ts
index f08350c08..65550bacc 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -27,6 +27,10 @@ describe('e2e', () => {
         '--isolated',
         '--executable-path',
         executablePath(),
+        '--no-usage-statistics',
+        '--no-performance-crux',
+        '--chrome-arg=--no-sandbox',
+        '--chrome-arg=--disable-setuid-sandbox',
         ...extraArgs,
       ],
     });
diff --git a/tests/tools/pages.test.ts b/tests/tools/pages.test.ts
index 3fb5892b6..a2a2cc4c8 100644
--- a/tests/tools/pages.test.ts
+++ b/tests/tools/pages.test.ts
@@ -37,6 +37,34 @@ const EXTENSION_SIDE_PANEL_PATH = path.join(
   '../../../tests/tools/fixtures/extension-side-panel',
 );
 
+/**
+ * Shared Puppeteer browsers can retain other extensions' service workers.
+ * Keep snapshots stable by keeping only SW lines for this test's extension
+ * and renumbering sw-N.
+ */
+function normalizeListPagesSnapshotText(
+  raw: string,
+  extensionId: string,
+): string {
+  const marked = raw.replaceAll(extensionId, '<extension-id>');
+  const lines = marked.split('\n');
+  const out: string[] = [];
+  let swCounter = 0;
+  for (const line of lines) {
+    const swMatch = /^sw-\d+:(.*)$/.exec(line);
+    if (swMatch) {
+      if (!line.includes('<extension-id>')) {
+        continue;
+      }
+      swCounter++;
+      out.push(`sw-${swCounter}:${swMatch[1]}`);
+      continue;
+    }
+    out.push(line);
+  }
+  return out.join('\n');
+}
+
 describe('pages', () => {
   afterEach(() => {
     sinon.restore();
@@ -89,9 +117,9 @@ describe('pages', () => {
           };
           assert.ok(textContent);
 
-          const text = textContent.text.replaceAll(
+          const text = normalizeListPagesSnapshotText(
+            textContent.text,
             extensionId,
-            '<extension-id>',
           );
           t.assert.snapshot?.(text);
         },
@@ -115,7 +143,7 @@ describe('pages', () => {
             const swTarget = await context.browser.waitForTarget(
               target =>
                 target.type() === 'service_worker' &&
-                target.url().includes('chrome-extension://'),
+                target.url().includes(`chrome-extension://${extensionId}/`),
             );
             const swUrl = swTarget.url();
 
@@ -135,15 +163,18 @@ describe('pages', () => {
               const structured = result.structuredContent as {
                 extensionServiceWorkers: Array<{url: string}>;
               };
+              const ours = structured.extensionServiceWorkers.filter(sw =>
+                sw.url.includes(extensionId),
+              );
               assert.deepStrictEqual(
-                structured.extensionServiceWorkers.map(sw => sw.url),
+                ours.map(sw => sw.url),
                 [swUrl],
               );
             }
 
-            const text = textContent.text.replaceAll(
+            const text = normalizeListPagesSnapshotText(
+              textContent.text,
               extensionId,
-              '<extension-id>',
             );
             t.assert.snapshot?.(text);
           },
@@ -188,9 +219,9 @@ describe('pages', () => {
           };
           assert.ok(textContent);
 
-          const text = textContent.text.replaceAll(
+          const text = normalizeListPagesSnapshotText(
+            textContent.text,
             extensionId,
-            '<extension-id>',
           );
           t.assert.snapshot?.(text);
         },
diff --git a/tests/tools/styles.test.ts b/tests/tools/styles.test.ts
new file mode 100644
index 000000000..ed460209b
--- /dev/null
+++ b/tests/tools/styles.test.ts
@@ -0,0 +1,276 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import assert from 'node:assert';
+import {describe, it} from 'node:test';
+
+import {
+  diffComputedStyles,
+  diffComputedStylesSnapshot,
+  getBoxModel,
+  getComputedStyles,
+  getComputedStylesBatch,
+  getVisibility,
+  saveComputedStylesSnapshot,
+} from '../../src/tools/styles.js';
+import {html, withMcpContext} from '../utils.js';
+
+describe('styles', () => {
+  describe('get_computed_styles', () => {
+    it('returns filtered computed styles', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<div
+            id="box"
+            style="display:block;color:rgb(0,0,255)"
+            >box</div
+          >`,
+        );
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await getComputedStyles.handler(
+          {
+            params: {
+              uid: '1_1',
+              properties: ['display'],
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          computed: Record<string, string>;
+        };
+        assert.strictEqual(parsed.computed.display, 'block');
+      });
+    });
+
+    it('can include best-effort rule origins', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<div
+            id="box"
+            style="display:block"
+            >box</div
+          >`,
+        );
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await getComputedStyles.handler(
+          {
+            params: {
+              uid: '1_1',
+              properties: ['display'],
+              includeSources: true,
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          computed: Record<string, string>;
+          sourceMap?: Record<string, {source?: string}>;
+        };
+        assert.strictEqual(parsed.computed.display, 'block');
+        assert.strictEqual(parsed.sourceMap?.display?.source, 'inline');
+      });
+    });
+  });
+
+  describe('get_box_model', () => {
+    it('returns box quads and rects', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<div
+            id="box"
+            style="width:10px;height:10px;padding:1px;border:1px solid"
+            >box</div
+          >`,
+        );
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await getBoxModel.handler(
+          {params: {uid: '1_1'}, page: context.getSelectedMcpPage()},
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          borderRect: {width: number};
+          contentRect: {width: number};
+          borderQuad: unknown;
+        };
+        assert.ok(parsed.borderQuad);
+        assert.ok(parsed.borderRect.width >= parsed.contentRect.width);
+      });
+    });
+  });
+
+  describe('get_visibility', () => {
+    it('flags display:none as not visible', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(html`<div id="box">hidden</div>`);
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+        await page.evaluate(() => {
+          const el = document.getElementById('box');
+          if (el) {
+            el.style.display = 'none';
+          }
+        });
+
+        await getVisibility.handler(
+          {params: {uid: '1_1'}, page: context.getSelectedMcpPage()},
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          isVisible: boolean;
+          reasons: string[];
+        };
+        assert.strictEqual(parsed.isVisible, false);
+        assert.ok(parsed.reasons.includes('display:none'));
+      });
+    });
+  });
+
+  describe('get_computed_styles_batch', () => {
+    it('returns styles for multiple elements', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(html`<div>box</div><span>inline</span>`);
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await getComputedStylesBatch.handler(
+          {
+            params: {
+              uids: ['1_1', '1_2'],
+              properties: ['display'],
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as Record<string, {display: string}>;
+        assert.strictEqual(parsed['1_1'].display, 'block');
+        assert.strictEqual(parsed['1_2'].display, 'inline');
+      });
+    });
+  });
+
+  describe('diff_computed_styles', () => {
+    it('returns changed properties between two nodes', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(html`<div>box</div><span>inline</span>`);
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await diffComputedStyles.handler(
+          {
+            params: {
+              uidA: '1_1',
+              uidB: '1_2',
+              properties: ['display'],
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          styleChanges: Array<{
+            property: string;
+            before: string;
+            after: string;
+          }>;
+        };
+        const display = parsed.styleChanges.find(p => p.property === 'display');
+        assert.ok(display);
+        assert.strictEqual(display?.before, 'block');
+        assert.strictEqual(display?.after, 'inline');
+      });
+    });
+  });
+
+  describe('named snapshots', () => {
+    it('saves and diffs snapshot vs current', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<div
+            id="box"
+            style="display:block"
+            >box</div
+          >`,
+        );
+        await context.createTextSnapshot(context.getSelectedMcpPage());
+
+        await saveComputedStylesSnapshot.handler(
+          {
+            params: {
+              name: 'snap1',
+              uids: ['1_1'],
+              properties: ['display'],
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        await page.evaluate(() => {
+          const el = document.getElementById('box');
+          if (el) {
+            el.style.display = 'inline';
+          }
+        });
+
+        response.resetResponseLineForTesting();
+        await diffComputedStylesSnapshot.handler(
+          {
+            params: {
+              name: 'snap1',
+              uid: '1_1',
+              properties: ['display'],
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        const json = response.responseLines.at(2)!;
+        const parsed = JSON.parse(json) as {
+          styleChanges: Array<{
+            property: string;
+            before: string;
+            after: string;
+          }>;
+        };
+        const display = parsed.styleChanges.find(p => p.property === 'display');
+        assert.strictEqual(display?.before, 'block');
+        assert.strictEqual(display?.after, 'inline');
+      });
+    });
+  });
+});
diff --git a/tests/utils.ts b/tests/utils.ts
index f764fa9ce..78f2b9cd7 100644
--- a/tests/utils.ts
+++ b/tests/utils.ts
@@ -74,7 +74,11 @@ export async function withBrowser(
     devtools: options.autoOpenDevTools ?? false,
     pipe: true,
     handleDevToolsAsPage: true,
-    args: ['--screen-info={3840x2160}'],
+    args: [
+      '--screen-info={3840x2160}',
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+    ],
     enableExtensions: true,
   };
   const key = JSON.stringify(launchOptions);