从提线木偶到自动驾驶:从 CDP 通道到 AI 浏览器自动化

--remote-debugging-port=0

Chrome 启动
  ↓
--remote-debugging-port=0
  ↓
Chrome 开启调试 HTTP 服务器
  ↓
提供 /json/list 返回 WebSocket 地址
  ↓
Playwright 连接 ws://...
  ↓
开始发送 CDP 指令控制浏览器

page.click("#btn")

操作会翻译成 CDP 指令

Input.click(x=100, y=200)

浏览器收到 CDP 指令 → 在页面上进行点击

• • 工作模式： 开发者需要手动寻找元素的 id、class 或 xpath。
• • 痛点： 这种方式极其“脆弱”。只要网页改版，CSS 类名一变，脚本就会直接报错崩溃。你必须不断地修补代码，这种自动化本质上是硬编码的提线木偶。

AI 浏览器自动化：具备“视觉”与“逻辑”的驾驶员

当大语言模型（LLM）接入 CDP 通道后，游戏规则变了。AI 不再通过固定的代码去找按钮，而是像人一样“看”网页。

原理简析：

AI 自动化通常遵循 感知 -> 思考 -> 执行 的循环：

1. 1. 感知（Observation）： AI 通过 CDP 获取当前的 DOM 树、Accessibility Tree（无障碍树），我们可以想到的最简单的做法是把整个页面的HTML都作为提示词发送给AI，但是这样非常消耗token,在实际应用中，一般的做法是倾向于通过 CDP 获取 无障碍树 (Accessibility Tree)。因为它只包含按钮、输入框、链接等关键交互元素，再辅以多层截断的手段进行压缩。对于支持视觉能力的大模型，甚至直接获取页面截图，比如browser-use框架的use_vision模式， 在这种模式下，会把页面截图的base64编码发送给AI作为上下文，执行效果会更好。
2. 2. 思考（Reasoning）： AI在获知页面状态后，基于你给 AI 下达的指令：“帮我在携程订一张明天去上海的机票”。AI 会分析当前的页面状态：“我现在在首页，我需要先找到搜索框，输入目的地。”
3. 3. 执行（Action）： AI 将逻辑转化为具体的操作（点击、输入、滚动），并通过 CDP 通道发给浏览器。

下面是一个简单示例，说明这个过程

import asyncio
import json
from playwright.async_api import async_playwright
from openai import OpenAI

client = OpenAI(api_key="YOUR_API_KEY")

async def get_ai_instruction(page_summary, objective):
    """大脑：调用 AI 返回下一步操作的 JSON 指令"""
    prompt = f"""
    当前网页交互元素摘要: {page_summary}
    用户最终目标: {objective}

    请根据当前状态，选择下一步操作。只能返回 JSON 格式：
    {{"action": "type", "target": "选择器", "value": "内容"}} 
    或 {{"action": "click", "target": "选择器"}}
    或 {{"action": "success", "reason": "描述"}}
    """

    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[{"role": "user", "content": prompt}],
        response_format={ "type": "json_object" }
    )
    return json.loads(response.choices[0].message.content)

async def run_real_ai_agent():
    async with async_playwright() as p:
        # 1. 环境准备 (CDP 启动)
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto("https://example.com/login")

        objective = "使用账号 admin 和密码 123 登录系统"

        for _ in range(10): # 最大尝试10步
            # 2. 感知 (Perception) - 提取精简的交互树
            # 这里简化处理，实际会提取 role, name, id 等属性
            snapshot = await page.evaluate("""() => {
                return Array.from(document.querySelectorAll('input, button')).map(el => {
                    return { tag: el.tagName, id: el.id, type: el.type, text: el.innerText };
                });
            }""")

            # 3. 思考 (Reasoning) - 调用真 AI
            instruction = await get_ai_instruction(snapshot, objective)
            print(f"[AI 决策]: {instruction}")

            # 4. 执行 (Execution) - 通过 CDP 操作浏览器
            action = instruction["action"]
            if action == "type":
                await page.fill(instruction["target"], instruction["value"])
            elif action == "click":
                await page.click(instruction["target"])
            elif action == "success":
                print("任务圆满完成！")
                break

            await asyncio.sleep(1) 

        await browser.close()

# asyncio.run(run_real_ai_agent())

可以看到，整个过程就是根据用户的任务和当前的页面状态让AI返回结构化的JSON指令，接着我们在解析整个指令并翻译为Playwright指令并通过CDP发送给浏览器执行。当然实际过程中我们要考虑很多东西，包括DOM树的压缩，上下文的记忆，任务的重试等等。现在有几个非常成熟的库专门干这件事：

1. 1. Browser-use: 目前最火的库，支持视觉识别（直接看截图）。
2. 2. Skyvern: 专门用于处理复杂的工作流和填表。
3. 3. LaVague: 开源的文本到浏览器动作引擎。

总结：未来的冲浪方式

从底层的 CDP 通道（修路），到 Playwright 框架（造车），再到如今的 AI Agent（自动驾驶仪），浏览器自动化已经从单纯的“抓取数据”变成了真正的“模拟人类操作”。

为什么 AI 更强？

• • 自愈能力： 哪怕网页按钮从左边挪到了右边，或者类名从 .btn-submit 变成了 .submit-v2，AI 依然能通过语义识别找到它。
• • 模糊处理： 你不再需要写 click('#login-001')，你只需要告诉 AI “登录”，它自己会去找那个长得像登录的地方。

未来，我们可能不再需要学习复杂的爬虫技术或自动化语法。只要 CDP 这个底层通道还在，AI 就能化身为你的数字分身，在复杂的互联网海洋中替你完成那些重复、枯燥的任务。