Skill: Replay Chrome DevTools Recording

Replay a Chrome DevTools Recorder export in the user's live browser via the Chrome DevTools MCP.

Prerequisite: Chrome MCP must be connected. See context.md if unsure.

Accepted Input Formats

The user may provide any of these exports from Chrome DevTools Recorder:

1. JSON (recommended)

Preferred over JS formats for two reasons:

• Structured and unambiguous to parse

• Large recordings can be read progressively instead of loading the entire file into context at once. Use jq or Python to inspect specific steps:

count steps

jq '.steps | length' recording.json

read steps 0–4 only

jq '.steps[0:5]' recording.json

find all navigate steps

jq '[.steps[] | select(.type == "navigate")]' recording.json

import json with open("recording.json") as f: steps = json.load(f)["steps"]

process steps[i] one at a time

Start by reading just the first few steps to understand intent, then read further as needed.

{ "title": "My recording", "steps": [ { "type": "navigate", "url": "https://example.com" }, { "type": "click", "selectors": [["aria/Submit"], ["button.submit"]] }, { "type": "change", "value": "hello", "selectors": [["aria/Search box"]] } ] }

2. @puppeteer/replay JS (import { createRunner } )
3. Puppeteer JS (require('puppeteer') , page.goto , Locator.race )

All three carry the same semantic information. Parse whichever is provided.

How to Replay

Read semantically, not literally. The recording is a reference — selectors, IDs, and coordinates may be stale. The page state may differ (popups, login walls, different content).

Step-by-step approach

Parse the recording — understand the full intent before acting. Summarize what the recording does in 1–2 sentences.

Navigate first — execute navigate steps directly.

For each interaction step, take a snapshot first, then find the target element:

• Try aria/... selectors first (most robust)

• Fall back to text/... , then CSS class hints, then visual context from the snapshot

• Do not rely on ember IDs, numeric IDs, or exact XPaths — these change every page load

Step type mapping:

Recording type MCP action

navigate

navigate_page

click

take_snapshot → find uid → click

change

click the element → type_text or fill

keyDown/keyUp

press_key

scroll

evaluate_script with window.scrollBy

setViewport

emulate viewport

waitForElement

wait_for

After each significant step, take a snapshot to confirm the result before proceeding.

Handling Unexpected Situations

Handle these automatically (do not stop):

• Unexpected popups or banners → dismiss them (aria/Dismiss , aria/Close , aria/× ) then continue

• Cookie consent dialogs → accept or dismiss

• Tooltip overlays blocking clicks → close them first

Pause and ask the user when:

• Login / authentication is required

• A CAPTCHA appears

• The page structure looks completely different from what the recording implies

• A destructive action is about to happen (e.g., deleting data, submitting a form that sends real content) — confirm with user before proceeding

• You are stuck for more than 2 attempts on the same step

When pausing, explain clearly: what step you are on, what you expected, and what you actually see.

For MCP setup, known issues, and Chrome startup instructions, see context.md .