12 traps when Claude Code drives your real Chrome through Playwright MCP (and the fixes)

Description and use

Automation of a real Chrome profile via Playwright MCP was stabilized by using dedicated profiles, visibility checks, insertText for non‑ASCII, editor state validation, and hidden file inputs.

Problem

Automating a real Chrome profile via Playwright MCP often fails due to visibility, hidden windows, non‑ASCII input, editor state drift, and file handling issues.

Outcome

Daily automation of real Chrome profiles became stable, with reduced timeouts, correct character handling, and reliable form submissions.

Workflow

• 1. Create a dedicated user‑data‑dir and log in manually. 2. Launch Chrome with --remote‑debugging‑port and the dedicated dir. 3. Connect Playwright MCP via CDP endpoint. 4. Before each click, check document.visibilityState; if hidden, bring window to front using SetWindowPos. 5. For new tabs, call page.bringToFront(). 6. Use page.keyboard.insertText() for non‑ASCII input. 7. In rich‑text editors, use document.execCommand('selectAll') before typing and verify with a visible counter. 8. For ProseMirror editors, dispatch a paste event with text/html data and verify heading/ list structure. 9. To upload a local file, create a hidden input[type=file], setInputFiles(), and read the file on the page. 10. After each operation, confirm the expected state (e.g., form values, post content).

Evidence

Recent Chrome (136 and later) refuses --remote-debugging-port on the default profile.

Source

TimeoutError: locator.click: Timeout 30000ms exceeded. - waiting for element to be visible, enabled and stable

Source