使用 CLI + Skill 搭建浏览器 AI 自动化框架：实现高效低成本的网页操作

big 发布于 阅读：76

使用 CLI + Skill 搭建浏览器 AI 自动化框架：实现高效低成本的网页操作

在当今数字化时代，浏览器自动化已成为提升工作效率的关键技术。无论是数据采集、表单填写，还是重复性的网页操作，自动化都能帮助我们从繁琐的任务中解放出来。然而，传统的浏览器自动化方案往往存在门槛高、成本高、维护复杂等问题。

今天，我将为大家介绍一种全新的解决方案：通过 Playwright CLI 与 AI Agent（如 Claude Code、Codex）的深度结合，配合 Skill（技能） 机制，实现自然语言驱动的浏览器自动化。该方案不仅大幅降低了使用门槛，还能节省约 4 倍的 Token 消耗，让自动化变得更加简单、高效、可持续。

一、核心技术组件解析

1.1 Playwright CLI：微软开源的浏览器自动化利器

Playwright CLI 是微软于 2024 年初开源的命令行工具，它将 Playwright 的强大功能封装为简洁的 CLI 接口。与传统的 Playwright 编程接口相比，CLI 版本更适合快速原型开发和脚本化任务。

Playwright CLI 的核心优势包括：

跨浏览器支持：支持 Chrome、Edge、Firefox、Safari 等主流浏览器

智能摘要机制：默认只返回网页摘要，而非完整的 DOM 结构，大幅减少数据量

按需读取：AI 仅在需要时读取快照（Snapshot）或截图，避免上下文膨胀

状态持久化：通过 --persistent 参数保留 Cookie 和登录状态，避免重复认证

1.2 AI Agent：智能决策与自然语言交互

视频演示了两种主流 AI Agent 的集成方式：

Claude Code：Anthropic 推出的命令行工具，能够理解自然语言指令，并生成相应的代码执行。

Codex：OpenAI 开发的 AI 编程助手，支持多种编程语言的代码生成和执行。

这两种 Agent 都能通过读取项目目录下的配置文件（如 .claude 或 .codex 文件夹）来理解可用的 Skills，并基于自然语言描述自主决策执行步骤。

1.3 Skill 机制：知识沉淀与复用的核心

Skill 是该方案的核心创新点。它本质上是一个任务脚本库，记录了：

任务的完整描述

执行步骤的详细指引

异常处理的经验总结

通过将成功执行的任务转化为 Skill，后续运行可实现接近零 Token 消耗的高效复用。这解决了 AI Agent 在长任务中 Token 消耗剧增的痛点。

二、环境准备与安装

在开始之前，需要确保开发环境满足以下要求。

2.1 系统要求

操作系统：Windows、macOS、Linux 均可

Node.js：需要 Node.js 14+ 版本

浏览器：Chrome 或 Edge（建议使用最新版本）

2.2 安装步骤

第一步：安装 Node.js

访问 Node.js 官网（https://nodejs.org），下载并安装适合你操作系统的 LTS 版本。安装完成后，在终端验证：

bash

node --version
npm --version

第二步：安装 Playwright CLI

使用 npm 全局安装 Playwright CLI：

bash

npm install -g @playwright/cli@latest

安装完成后，验证安装：

bash

playwright-cli --version

第三步：安装浏览器驱动

确保系统已安装 Chrome 或 Edge 浏览器。如果使用无头模式，Playwright CLI 会自动下载必要的浏览器驱动。

三、Playwright CLI 基础用法

3.1 打开网页

最基本的操作是打开一个网页：

bash

无头模式（默认）- 后台运行，省内存

playwright-cli open google.com

有头模式 - 方便调试，可视化观察操作

playwright-cli open google.com --headed

--headed 参数会在可视窗口中打开浏览器，非常适合调试阶段观察 AI 的操作行为。

3.2 获取网页信息

Playwright CLI 提供多种方式获取网页内容：

网页摘要

CLI 默认返回网页的智能摘要，包含页面结构、主要元素和文本内容的概述。这比直接获取整个 DOM 要高效得多。

快照文件

CLI 会生成一个 .yml 格式的快照文件，记录页面的详细结构，供 AI 在需要时精确读取。

截图功能

生成页面截图：

bash

playwright-cli screenshot --output screenshot.png

3.3 状态持久化

长时间运行的自动化任务需要保持登录状态。使用 --persistent 参数：

bash

playwright-cli open --headed --persistent

这会保留 Cookie 和会话信息，避免每次操作都需要重新登录。对于需要身份验证的网站（如电商后台、企业系统），这个功能至关重要。

四、AI Agent 集成配置

4.1 安装 Skills 扩展

在项目文件夹下运行以下命令，安装 Playwright CLI 的 Skills 扩展：

bash

playwright-cli install --skills

这会在当前目录创建一个包含 Skill 定义文件的目录，AI Agent 可以读取这些文件来了解可用的功能。

4.2 Claude Code 接入

安装 Claude Code 后，启动它：

bash

claude

Claude Code 会自动扫描当前目录下的 .claude 文件夹，读取其中定义的 Skills，并等待自然语言指令。

4.3 Codex 接入

对于使用 Codex 的用户，只需将 .claude 文件夹重命名为 .codex：

bash

mv .claude .codex

Codex 即可识别并使用相同的 Skill 定义，实现无缝切换。

4.4 自然语言交互示例

配置完成后，就可以用自然语言给 AI 下达指令了：

"使用 playwright-cli 参数 --headed --persistent，打开 Grok，问问今天青岛的天气怎么样？"

AI 会自动解析这个指令，生成相应的命令并执行。过程中如果遇到问题（如页面加载失败、元素定位错误），AI 会自主尝试解决。

五、实战案例：电商评论数据抓取

5.1 任务描述

让我们通过一个实际案例来展示完整的工作流程。任务目标：抓取天猫商品的前 100 条评论，并保存为 CSV 文件。

5.2 执行过程

第一步：下达指令

向 AI Agent 发出任务指令：

"请抓取天猫商品评论页面（URL: https://tmall.com/product/comments.html?id=xxxx）的前 100 条评论，保存到 comments.csv 文件中，包含评论内容、用户名、评论时间、评分等字段。"

第二步：AI 自主探索

AI Agent 会自动执行以下步骤：

1.
打开目标页面：使用 Playwright CLI 打开天猫评论页面
2.
页面分析：读取网页摘要，理解页面结构
3.
元素定位：识别评论列表、用户名、评论内容等元素的位置
4.
循环抓取：模拟滚动和翻页操作，收集评论数据
5.
数据清洗：去除 HTML 标签，处理特殊字符
6.
保存文件：将数据写入 CSV 文件

第三步：异常处理

在实际执行过程中，AI 可能会遇到各种问题：

页面加载超时

元素定位失败（页面结构更新）

反爬虫机制触发

需要验证码验证

AI Agent 会根据预设的异常处理策略自动重试或调整策略。例如，如果发现评论列表为空，会检查是否需要滚动加载更多内容。

5.3 关键代码示例

AI Agent 生成的代码可能类似如下：

javascript

const comments = [];

async function scrapeComments(page, maxCount = 100) {
while (comments.length < maxCount) {
// 等待评论列表加载
await page.waitForSelector('.comment-list');

// 提取当前页面的评论
const pageComments = await page.evaluate(() => {
  const items = document.querySelectorAll('.comment-item');
  return Array.from(items).slice(0, 100 - comments.length).map(item => ({
    content: item.querySelector('.comment-content')?.textContent?.trim() || '',
    username: item.querySelector('.username')?.textContent?.trim() || '',
    time: item.querySelector('.comment-time')?.textContent?.trim() || '',
    rating: item.querySelector('.rating')?.textContent?.trim() || ''
  }));
});

comments.push(...pageComments);

// 点击下一页
const nextButton = await page.$('.next-page');
if (nextButton && !nextButton.disabled) {
  await nextButton.click();
  await page.waitForTimeout(1000);
} else {
  break;
}

}

return comments;
}

六、Skill 机制：实现长期高效复用

6.1 为什么需要 Skill？

在上面的案例中，AI Agent 完成了一个完整的电商评论抓取任务。但更重要的价值在于：将这次成功的经验沉淀下来，形成可复用的 Skill。

传统的 AI Agent 工作流存在一个核心问题：每次执行任务都需要重新理解需求、探索页面、调试代码，Token 消耗巨大。而 Skill 机制通过知识沉淀，让重复任务接近零成本执行。

6.2 如何创建 Skill？

任务完成后，向 AI Agent 发出指令：

"请将刚才完成的电商评论抓取流程总结为一个 Skill，命名为 save_tmall_comments，包含必要的参数说明和异常处理策略。"

AI 会自动生成 Skill 定义文件，通常包含：

yaml

save_tmall_comments.yaml

name: 天猫评论抓取
description: 抓取天猫商品评论数据并保存为 CSV 文件
parameters:

6.3 复用 Skill

下次需要抓取评论时，只需一句话：

"使用 save_tmall_comments 抓取这个商品（https://tmall.com/product/12345）的评论。"

AI Agent 会：

1.
读取 Skill 定义
2.
理解任务参数
3.
加载保存的代码逻辑
4.
适配当前页面
5.
执行任务

整个过程几乎不需要额外的探索和调试，Token 消耗大幅降低。

七、技术架构总结

整个解决方案的架构可以用以下流程图表示：

┌─────────────────────────────────────────────────────────────┐
│ 用户（自然语言） │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ AI Agent（Claude Code / Codex） │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ 自然语言理解 │ │ 任务规划 │ │ 代码生成与执行 │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Playwright CLI │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │
│ │ 浏览器控制 │ │ 快照/截图 │ │ 状态持久化 │ │
│ └─────────────┘ └─────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Chrome / Edge / Firefox │
│ （真实浏览器环境） │
└─────────────────────────────────────────────────────────────┘

三层协同：

1.
用户层：使用自然语言下达指令，无需学习编程
2.
AI Agent 层：负责理解指令、规划任务、生成代码、处理异常
3.
Playwright CLI 层：提供底层浏览器控制能力

两大闭环：

1.
执行闭环：指令 → 执行 → 结果反馈
2.
学习闭环：成功经验 → Skill 沉淀 → 复用优化

八、应用场景与最佳实践

8.1 典型应用场景

数据采集与监控

竞品价格监控

社交媒体舆情采集

电商评论分析

招聘网站职位信息抓取

自动化办公

表单自动填写

批量数据上传

报告自动生成

定时任务执行

测试与监控

网页功能自动化测试

网站可用性监控

性能指标采集

8.2 最佳实践建议

安全与合规

遵守网站的 robots.txt 协议

控制请求频率，避免对目标网站造成负担

不采集个人隐私数据

获取必要的授权许可

稳定性保障

实现重试机制应对网络波动

添加超时控制避免任务卡死

记录详细的执行日志便于问题排查

定期更新 Skill 以适应网站结构变化

性能优化

优先使用无头模式节省资源

合理设置等待时间，平衡速度与稳定性

批量处理时使用并发控制

善用快照机制减少不必要的数据传输

九、总结与展望

通过 Playwright CLI 与 AI Agent 的深度结合，我们找到了一种高效、低成本、易维护的浏览器自动化解决方案。核心价值体现在三个方面：

降本增效

按需读取机制节省约 4 倍 Token 消耗

Skill 机制实现知识复用

自然语言交互降低学习门槛

灵活扩展

支持多种 AI Agent（Claude Code、Codex）

可接入任何主流浏览器

Skill 库可持续扩充

稳定可靠

状态持久化避免重复登录

完善的异常处理机制

详细的执行日志便于调试

展望未来，随着 AI 技术的持续发展，浏览器自动化将变得更加智能。我们可以期待：

更强的自主决策能力，减少人工干预

更丰富的预置 Skills，覆盖更多业务场景

更智能的异常处理，自动适应页面变化

更广泛的应用领域，从数据采集到智能决策

希望这篇文章能帮助你快速上手这套强大的自动化框架。如果有任何问题或想法，欢迎交流探讨！