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

说明与用途

通过 Playwright MCP 对真实 Chrome 配置文件的自动化通过使用专用配置文件、可见性检查、insertText 处理非 ASCII、编辑器状态验证和隐藏文件输入得到稳定。

问题

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.

结果

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

工作流

• 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).

证据

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

来源

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

来源