Selector Forge 实战指南：用 AI 为浏览器自动化生成可靠的 CSS 选择器

写 Web 自动化测试或爬虫时，最让人头疼的问题之一就是 CSS 选择器的脆弱性。页面上一个微小的结构变化，就可能让你的 .container > div.row:nth-child(3) > button.cta 一夜之间失效。AI 编码工具（Claude Code、Cursor、Codex）虽然擅长生成代码，但在编写选择器时往往会产生”看起来对但实际上匹配错误元素”的候选，需要人工反复验证。

Selector Forge 是 Intuned 推出的一个浏览器扩展（Chrome 和 Firefox 均支持），它用一种聪明的AI 提出 + 浏览器验证的双重机制，帮你生成经过真实 DOM 检验的 CSS 和 XPath 选择器。本文带你从安装到实战，全面了解这个工具的价值。

核心思路：AI 提案，浏览器验证

Selector Forge 的设计哲学用一个原则就能概括：AI 可以提建议，但永远不应拥有正确性的最终判断权。

它的工作流程是：

1. 打开任意页面，激活扩展
2. 选择选择模式（单选或多选），直接在页面上点击目标元素
3. 扩展捕获当前选择结果（选中元素、DOM 上下文、候选种子），发送到后端
4. 后端 AI 生成并排名候选选择器
5. 扩展在真实 DOM 中测试每一个候选，将测试结果反馈给后端
6. 循环迭代直到 AI 产出通过验证的选择器
7. 弹窗只展示经过验证的选择器，每个都带有复制按钮

这里的信任边界（Trust Boundary）是关键：浏览器始终是正确性的最终仲裁者。AI 提出候选，浏览器验证正确性——AI 的打分在验证结果面前没有最终决定权。

两种选择模式

Selector Forge 提供了两种模式，覆盖了最常见的需求：

Single（单元素模式）：选定一个元素，获取精准的选择器候选。适合按钮、输入框、链接、标签等一次性目标。

List（列表模式）：从一个重复集合中选取两个示例元素，扩展会自动推导出容器选择器，并在保存前让你预览匹配的完整集合。这对表格行、列表项、卡片等重复结构特别有用。

快速上手

安装很简单，去对应商店安装即可：

• Chrome：Chrome Web Store
• Firefox：Firefox Add-ons

安装后打开任意页面，点击扩展图标激活，选择模式后直接在页面上点击元素，等待 AI 生成并验证即可。

本地开发与调试

如果你想贡献代码或定制行为，项目基于 WXT 构建，使用 TypeScript + React，支持本地开发：

git clone https://github.com/Intuned/selector-forge.git
cd selector-forge
yarn install
yarn dev

然后在 chrome://extensions 启用开发者模式，加载 .output/chrome-mv3 目录即可。

项目的主要测试层级也值得参考：

这种三层次测试策略（单元 → 真实浏览器 → 端到端）确保了选择器生成逻辑在每个环节都被严谨验证。

项目结构一览

entrypoints/
  background.ts     后台 Service Worker — 会话状态、Agent 循环、网络 I/O
  content.ts        内容脚本 — 选择器覆盖层、DOM 访问、测试
  popup/            React 弹窗 — 模式选择、结果展示
lib/
  agent/           Agent 循环控制器
  content/         选择器浮层、元素注册、DOM 检测
  background/      处理器、上下文菜单、CLI 桥接
  messaging/       类型安全的通信协议
  state/           会话状态、历史、Schema
  auth/            认证客户端

开发者集成：从扩展到 CLI 和 MCP

Selector Forge 的定位不仅是独立工具，更是 Intuned 浏览器自动化生态的组成部分。在 Roadmap 中可以看到几个值得关注的集成方向：

• CLI 控制：通过 Intuned CLI 驱动扩展，支持本地 Agent 运行端到端测试
• MCP 暴露：通过 Model Context Protocol 让 AI 编码工具直接调用选择器生成能力
• 自建后端：开源可自托管的后端，让你完全控制选择器生成流程

这意味着 Selector Forge 不仅是手工测试的选择器提取工具，未来更会是AI Agent 浏览器自动化中的关键一环——Agent 无需猜测选择器，直接调用 Selector Forge 生成经过验证的可靠选择器。

与 Playwright 结合的最佳实践

Selector Forge 生成的选择器可以直接用于 Playwright 测试。以下是一个实际场景：

1. 在目标页面上用 Selector Forge 提取经过验证的选择器
2. 将选择器应用到 Playwright 的 page.locator() 中
3. 运行测试，确认通过

相比手动编写 page.locator('div.flex > button:nth-child(2)') 并祈祷它稳定，Selector Forge 生成的候选经过了真实 DOM 的逐项验证，大幅降低了选择器断裂的风险。特别是对于动态内容的页面（如 SPA 应用），这种 AI + 实时验证的流程比传统的属性匹配方式可靠得多。

总结

Selector Forge 解决了浏览器自动化中一个长期存在的痛点——选择器脆弱性。它的核心创新不在于 AI 本身，而在于将 AI 的生成能力与浏览器的验证权威严格分离的设计模式。对于从事 E2E 测试、Web 爬虫、或希望通过 AI Agent 实现浏览器自动化的开发者来说，这是一个值得添加到工具箱中的实用工具。

相关链接

• GitHub 仓库
• Chrome 扩展商店
• Firefox 扩展商店
• Intuned 浏览器自动化平台