Python 驱动浏览器自动化：Playwright 与 AI 实战指南

2.2 Trace Viewer：时间旅行调试器

这是 Playwright 最杀手级的功能。通过录制 Trace，你可以事后回放整个脚本执行过程。

• Timeline：每一毫秒发生了什么。
• Snapshots：查看操作前后的 DOM 快照。
• Network：查看每个点击触发了什么网络请求。

启用方式非常简单：

await context.tracing.start(screenshots=True, snapshots=True, sources=True)
# ... 执行操作 ...
await context.tracing.stop(path="trace.zip")

然后用 playwright show-trace trace.zip 即可可视化分析。

第三章：AI 赋能——构建'自愈'自动化脚本

传统脚本最怕什么？前端改版。 只要开发把 <button> 改成了 <button>，你的脚本就挂了。

当前，我们不需要手动修脚本，我们让 AI 来修。

3.1 视觉定位（Visual Grounding）

如果选择器失效，我们可以抓取当前页面的截图，发给 GPT-4o 或 Gemini 1.5 Pro 这样的多模态模型，问它：'注册按钮在哪里？'

3.2 实战：AI 自愈点击函数

import base64
from openai import AsyncOpenAI

client = AsyncOpenAI(api_key="sk-...")

async def ai_smart_click(page, description):
    """ 当常规选择器失败时，使用 AI 进行视觉定位点击 """
    try:
        # 1. 尝试常规模糊定位
        await page.click(f"text={description}", timeout=2000)
    except Exception:
        print(f"常规定位失败，启动 AI 视觉定位：{description}...")
        # 2. 截图
        screenshot_bytes = await page.screenshot()
        base64_image = base64.b64encode(screenshot_bytes).decode('utf-8')
        # 3. 询问 VLM (Visual Language Model)
        response = await client.chat.completions.create(
            model="gpt-4o",
            messages=[{"role":"user","content":[{"type":"text","text":f"Locate the center coordinates (x, y) of the element described as '{description}' on this webpage screenshot. Return ONLY json like {{'x': 100, 'y': 200}}."},{"type":"image_url","image_url":{"url":f"data:image/jpeg;base64,{base64_image}"}}]}],
            response_format={"type":"json_object"}
        )
        coords = eval(response.choices[0].message.content)
        print(f"AI 定位坐标：{coords}")
        # 4. 执行物理点击
        await page.mouse.click(coords['x'], coords['y'])

# 使用
# await ai_smart_click(page, "蓝色的提交订单按钮")

这种模式虽然比纯选择器慢（需要调用 API），但它极大地提高了脚本的鲁棒性。在关键业务流程（如支付下单）中，稳定性高于一切。

第四章：反爬与隐身（Stealth Mode）

现在稍微像样点的网站都有 Bot 检测（Cloudflare, Akamai）。直接用 Playwright 可能会被识别为机器人。

4.1 特征检测原理

网站会检查 navigator.webdriver 属性，或者检测 WebGL 指纹、字体列表等。

4.2 完美伪装方案

我们可以使用 playwright-stealth 库，或者手动注入 JS 来掩盖特征。

async function stealth_init(page) {
    await page.add_init_script(`
        // 掩盖 webdriver 属性
        Object.defineProperty(navigator, 'webdriver', { get: () => undefined });
        // 伪造 Chrome 插件列表 (如果是 headless 模式)
        if (!navigator.plugins || navigator.plugins.length === 0) {
            // ... 注入 Mock 数据
        }
        // 覆盖 WebGL 指纹
        const getParameter = WebGLRenderingContext.prototype.getParameter;
        WebGLRenderingContext.prototype.getParameter = function(parameter) {
            if (parameter === 37445) { return 'Intel Inc.'; }
            if (parameter === 37446) { return 'Intel Iris OpenGL Engine'; }
            return getParameter(parameter);
        };
    `);
}

此外，最重要的技巧是保存状态（State Storage）。不要每次都重新登录，而是像真人一样复用 Cookies。

# 登录一次保存状态
await page.context.storage_state(path="state.json")
# 下次直接加载
context = await browser.new_context(storage_state="state.json")

第五章：高性能集群化部署

当你需要每天抓取大量页面，单机单进程就不够看了。

5.1 生产者 - 消费者模式

结合我们之前讲的 asyncio，我们可以构建一个极致性能的爬虫集群。

async def worker(context, queue):
    while True:
        url = await queue.get()
        page = await context.new_page()
        try:
            # 开启资源过滤，极大提升速度
            await page.route("**/*.{png,jpg,jpeg,gif,css,font}", lambda route: route.abort())
            await page.goto(url)
            # ... 业务逻辑 ...
        finally:
            await page.close()
        queue.task_done()

async def main():
    queue = asyncio.Queue()
    # 填充任务
    for i in range(1000):
        queue.put_nowait(f"https://example.com/item/{i}")
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        context = await browser.new_context()
        # 启动 10 个并发 Worker 共享同一个浏览器实例（资源开销最小）
        workers = [asyncio.create_task(worker(context, queue)) for _ in range(10)]
        await queue.join()

这种共享 Browser Instance 但隔离 Page 的模式，比开启 10 个浏览器要节省 90% 的内存。

结语：自动化测试的终局

当前的 Playwright 已经不再仅仅是一个测试工具，它是连接 AI 大脑与数字世界的手臂。

• 对于测试工程师：掌握 Playwright + AI，意味着你可以写出永远不挂的测试用例。
• 对于爬虫工程师：Playwright 提供了最强的渲染能力和对抗能力。
• 对于全栈开发：它是在后端生成 PDF、截图、自动化运维的最佳胶水。

未来已来，现在的自动化不再是写死的脚本，而是能够感知、理解并自我修复的智能 Agent。

本文代码基于 Playwright Python 1.45+ 版本编写。