CLI + Skill：告别重复任务的浏览器AI自动化框架

在自动化领域，CLI（命令行界面）工具与自定义技能的组合正在彻底改变我们处理浏览器任务的方式。这个框架让 AI 能够自动化浏览器操作，接管机械重复的工作，同时极其节省 Token——甚至可以实现完全不需要 AI 参与的零 Token 自动化工作流。让我们一起通过实际步骤和代码示例，深入了解它的工作原理。

1. 核心组件与优势

关键工具

Agent 框架：Claude Code 或 Codex（用于 AI 驱动的任务编排）
浏览器自动化工具：Playwright CLI（微软在 2026 年初推出的全新开源工具，专为高效浏览器控制设计）
Skills（技能）：封装可重复流程的自定义脚本或工作流，减少 Token 使用，简化 AI 交互

为什么这个框架脱颖而出

Token 效率：与传统 Playwright MCP 方法相比，Playwright CLI 可将 Token 消耗降低最多 4 倍。它按需获取网页内容（例如网页快照或截图存储在本地，只在需要时才发送给 AI）
零 Token 工作流：许多任务可以用固定脚本自动化，完全消除 AI Token 成本
无需浏览器专业知识：你可以用自然语言自动化任务，不需要深入了解浏览器内部原理

2. 安装与基本使用

第一步：安装依赖

首先确保你的电脑上安装了 Node.js。访问 Node.js 官方网站下载并安装与你的操作系统匹配的版本。

接下来，通过 npm（Node 包管理器）安装 Playwright CLI：

npm install -g @playwright/cli

另外，请确保电脑上安装了 Google Chrome（或 Microsoft Edge）以进行浏览器自动化。

第二步：Playwright CLI 基础

Playwright CLI 支持两种浏览器模式：

有头模式（--headed）：可见的浏览器窗口（适合调试）
无头模式（默认）：不可见的后台浏览器（批量任务时节省内存）

以有头模式打开网页（例如 Google）：

playwright-cli open google.com --headed

运行此命令时，Playwright CLI 输出简洁的网页摘要（而非整个 DOM）和快照文件路径。AI 只在需要时从此快照中获取完整 DOM，从而最大程度减少 Token 使用。

截图命令：

playwright-cli screenshot

这会将 PNG 图片保存到本地，AI 自行决定是否处理——无需将图片数据直接发送给 AI。

要在多个会话之间保留登录状态（如 cookies），使用 --persistent 标志：

playwright-cli open google.com --headed --persistent

3. 与 AI Agent 集成（Claude Code 和 Codex）

像 Claude Code 或 Codex 这样的 AI Agent 需要"技能"来理解如何使用 Playwright CLI。以下是设置方法：

第一步：创建项目并安装技能

1. 创建一个项目文件夹，并在该目录中打开终端。

2. 安装 Playwright CLI 技能：

playwright-cli install --skill

第二步：连接到 Claude Code

启动 Claude Code 并检查可用技能：

What skills do you have?

Claude Code 应该会列出 playwright-cli 作为可用技能，确认集成成功。

第三步：连接到 Codex

将项目目录中的 .claude 技能文件夹重命名为 .codex。然后在 Codex 中运行：

/skills

Codex 会列出 playwright-cli，表示已准备就绪。

4. 实战示例

示例 1：抓取电商评论（零 Token 工作流）

让我们从淘宝商品页面提取前 100 条评论并保存为 CSV 文件。

第一步：让 AI 探索和优化（首次运行）

用自然语言让 Codex 处理任务：

Use playwright-cli --headed --persistent to open this Tmall product page, scrape the first 100 reviews, and save them to a CSV file.

Codex 会尝试 Playwright CLI 命令，可能会经历一些试错过程。成功后，它会输出包含评论的 CSV 文件。

第二步：将工作流保存为技能

为了优化后续运行，将这个流程转化为可复用的技能。让 Codex 执行：

Create a new skill called "save-tmall-reviews" that encapsulates opening the product page, scraping reviews, and saving to CSV. Include all steps and fixes for any issues encountered.

Codex 会生成一个技能文件，你可以保存在项目中。

第三步：使用技能运行（降低 Token 使用）

现在用技能重新运行任务：

Use the "save-tmall-reviews" skill to scrape reviews for this Tmall product.

有了技能的指导，Codex 只需原来约 5% 的 Token 就能完成任务。

第四步：转换为零 Token 脚本

要实现完全自动化的零 Token 执行，让 Codex 编写固定脚本：

Write a PowerShell script that combines all Playwright CLI commands to scrape Tmall reviews and save them to CSV. Include delays to ensure reliability.

Codex 会生成类似以下的脚本（简化示例）：

# Open the product page
playwright-cli open "https://detail.tmall.com/..." --headed --persistent

# Wait for the page to load
playwright-cli wait-for-selector "text=查看全部评价" --timeout 5000

# Click to view all reviews
playwright-cli click "text=查看全部评价"

# Extract reviews and save as CSV
playwright-cli eval "() => { /* JavaScript to extract reviews */ }" | ConvertTo-Csv | Out-File "reviews.csv"

直接在 PowerShell 中运行此脚本——无需 AI 参与，不消耗任何 Token。

示例 2：在 X 平台自动发布文章

在 X 平台上发布 Markdown 文章很繁琐（格式问题、图片上传等）。让我们来自动化它。

第一步：准备文章（Markdown 转 HTML）

首先，将 Markdown 文章转换为 HTML 并下载图片到本地。使用以下由 Codex 生成的 Python 脚本：

import requests
import re
import os
from bs4 import BeautifulSoup
import pandoc

# Download images from the Markdown article and reformat to local paths
def download_images_and_convert(md_path, img_dir="images", html_output="article.html"):
    # Create image directory
    os.makedirs(img_dir, exist_ok=True)

    # Read Markdown content
    with open(md_path, "r", encoding="utf-8") as f:
        md_content = f.read()

    # Extract and download images
    img_links = re.findall(r"![.*?]((.*?))", md_content)
    for i, img_link in enumerate(img_links):
        img_name = f"00{i+1}.png"
        img_path = os.path.join(img_dir, img_name)
        response = requests.get(img_link)
        with open(img_path, "wb") as f:
            f.write(response.content)
        # Replace remote image link with local path
        md_content = md_content.replace(img_link, img_path)

    # Convert Markdown to HTML with pandoc
    html_content = pandoc.convert_text(md_content, to="html", format="md")

    # Ensure each image is in its own paragraph
    html_content = re.sub(r"", r"", html_content)

    # Save HTML
    with open(html_output, "w", encoding="utf-8") as f:
        f.write(html_content)

if __name__ == "__main__":
    download_images_and_convert("article.md")

第二步：用 Playwright CLI 自动化发布

让 Codex 自动化发布流程：

Use playwright-cli --headed --persistent to open Platform X, create a new article, paste the HTML content, and replace image placeholders with the local images in the "images" folder. Ensure images are uploaded in order.

Codex 会生成 Playwright CLI 命令来：

1. 打开 X 平台并创建草稿。

2. 粘贴 HTML 内容。

3. 定位图片占位符并通过复制粘贴替换为本地图片。

第三步：保存为可复用的技能

最后，将这个工作流保存为技能供以后使用：

Create a skill called "publish-to-platform-x" that includes downloading images, converting to HTML, and automating the publishing process on Platform X.

示例 3：Web 应用自动化测试

对于自开发的 Web 应用（如简历优化工具），使用 Playwright CLI 运行自动化测试。

第一步：用 AI 生成测试用例

让 Codex 分析你的应用代码并创建测试用例：

Read the code of my resume optimization web app, then write a Chinese test document outlining the main flow (register -- login -- upload resume -- get AI suggestions). Then, use playwright-cli to execute these tests.

Codex 会生成如下测试文档（简化版）：

# Test Cases for Resume Optimization App
## 1. Registration
- Step 1: Open the app's registration page.
- Step 2: Enter a test email and password.
- Step 3: Submit and verify successful registration.

## 2. Login
- Step 1: Navigate to the login page.
- Step 2: Enter the registered email and password.
- Step 3: Verify successful login and redirection to the dashboard.

## 3. Resume Upload and AI Suggestions
- Step 1: Click "Upload Resume" and select a test resume file.
- Step 2: Wait for AI analysis and suggestions to load.
- Step 3: Verify the suggestions appear correctly.

第二步：用 Playwright CLI 执行测试

Codex 会生成 Playwright CLI 命令来运行这些测试：

# Open the registration page
playwright-cli open "http://localhost:5000/register" --headed --persistent

# Fill registration form
playwright-cli fill "input[name='email']" "test@example.com"
playwright-cli fill "input[name='password']" "testpass123"
playwright-cli click "text=Register"

# Login after registration
playwright-cli open "http://localhost:5000/login" --headed --persistent
playwright-cli fill "input[name='email']" "test@example.com"
playwright-cli fill "input[name='password']" "testpass123"
playwright-cli click "text=Login"

# Upload resume and test AI suggestions
playwright-cli set-input-files "input[type='file']" "test_resume.pdf"
playwright-cli click "text=Upload & Analyze"
playwright-cli wait-for-selector "div.ai-suggestions" --timeout 10000

5. 工作流总结

要有效实施这个框架，请遵循以下步骤：

准备工作：安装 Node.js、Playwright CLI 和 Chrome
与 AI Agent 集成：为 Claude Code 或 Codex 安装技能
任务执行：让 AI 使用 Playwright CLI 探索并完成复杂任务
用技能优化：让 AI 将工作流总结为可复用的技能
优化运行：使用技能重新运行任务，将 Token 使用量降低最多 10 倍
零 Token 自动化：对于固定工作流，让 AI 编写独立脚本并直接运行

这个 CLI + Skill 框架是浏览器自动化的革命性方案，兼具高效、节约成本和简单易用的特点。无论你是抓取数据、发布内容还是测试应用，它都能让你以最小的努力自动化重复性任务。

下一篇： 继续阅读 →