企业官网建设流程全解析

• AI 技能
• AI 插件

本文基于 agentic-awesome-skills 仓库中的awt-e2e-testing技能文档（位于 plugins/agentic-awesome-skills-claude/skills/awt-e2e-testing/SKILL.md）展开，并结合仓库内目录索引、插件兼容性元数据与技能规范文档进行源码级佐证。

AWT（AI Watch Tester）为 AI 编程工具赋予"眼睛和双手"：由 AI 编写声明式的 YAML 测试场景，由 AWT 通过 Playwright 在真实浏览器中执行，并以 OpenCV 模板匹配 + OCR 完成视觉断言。本文围绕这一技能在 AAS Core 中的定位，讲解其适用场景、核心能力、安装接入方式、执行流程、视觉匹配与失败诊断机制，以及它在仓库目录与插件兼容层中的元数据形态，帮助读者把 AI 驱动的端到端测试接入自己的编码工作流。

一、这个技能解决什么问题：AI 时代缺少的"浏览器眼睛与双手"

传统 E2E 测试依赖稳定的 DOM 选择器（#checkout-btn、[data-testid=...]），但面对现代前端框架频繁变动的组件结构，选择器极易失效，维护成本居高不下。awt-e2e-testing技能的定位截然不同：它面向AI coding tools（AI 编码工具），让模型既能"看到"真实渲染后的页面（视觉匹配），也能"操作"页面（真实浏览器交互），从而补齐 AI 编程闭环中最薄弱的一环——对运行结果的验证。

按照技能文档（SKILL.md）的定义，AWT 的工作方式是：

你的 AI 设计 YAML 测试场景；AWT 用 Playwright 执行它们。

也就是说，人的职责（或 AI 的职责）是编写声明式场景描述，而浏览器自动化、视觉断言、失败解释这类脏活累活全部交给 AWT 完成。

何时使用（When to Use）

文档明确给出了三个适用判断，值得在接入前逐条对照：

1. 需要 AI 辅助的端到端测试：测试通过真实浏览器执行，场景以声明式 YAML 编写——而不是让 AI 直接拼 CSS 选择器。
2. 测试流程依赖视觉匹配、OCR 或平台自动检测：当被测页面没有稳定可用的 DOM 选择器，或界面由 Canvas、WebGL、自定义渲染等"黑盒"内容构成时，视觉方案是唯一可行的断言路径。
3. 需要一个既能执行测试、又能解释失败的 E2E 工具链：AWT 不只是"跑完给个 pass/fail"，它还能针对失败输出结构化的诊断清单，供 AI 编码工作流理解并修复。

与此同时，文档也给出明确的使用边界：只有当任务清晰匹配上述范围时才应使用本技能；输出不能替代环境特定的验证、测试或专家评审；当必要输入、权限、安全边界或成功标准缺失时，应停下来向用户澄清。

二、当前已实现的能力清单（What works now）

技能文档列出了 AWT 当前可用的完整能力集，这也是判断"能做什么、不能做什么"的第一手依据：

从仓库的目录元数据来看，该技能被归类为test-automation（见 data/catalog.json），标签为awt、e2e，触发词覆盖awt、e2e、testing、ai、powered、web、eyes、hands、coding、declarative、yaml、scenarios（data/catalog.json）。这组触发词与文档描述高度一致，说明目录索引直接继承了技能 frontmatter 的语义。

三、安装与接入：一条命令完成

技能的 frontmatter 中直接给出了安装方式（SKILL.md）：

npx skills add ksgisang/awt-skill --skill awt -g

该命令从ksgisang/awt-skill仓库拉取awt技能并以全局（-g）方式安装，安装后 AI 编码工具即可在会话中按需调用。需要说明的是，这条命令针对的是 AWT 上游技能本体；在 agentic-awesome-skills 仓库中，该技能以目录形式收录于 plugins/agentic-awesome-skills/skills/awt-e2e-testing/ 与 Claude 插件 plugins/agentic-awesome-skills-claude/skills/awt-e2e-testing/，你可以在仓库内直接阅读其SKILL.md与相关文档，无需额外安装即可了解其用法。

技能元数据：frontmatter 逐字段解读

SKILL.md的 frontmatter 遵循仓库统一的技能规范。对照 docs/contributors/skill-anatomy.md，可以逐字段理解其含义：

• name: awt-e2e-testing——技能标识符，格式为小写连字符命名，且必须与目录名完全一致；
• description——一句话摘要，长度控制在 200 字符以内，同时被目录索引继承；
• risk: critical——安全分级。按 docs/contributors/skill-anatomy.md 的定义，critical表示"会修改状态、删除文件、推送生产环境"级别的操作。AWT 通过真实浏览器驱动被测应用并可能触发真实操作（如提交订单），因此被标记为critical，提示使用者在非生产或受控环境中执行；
• source——上游来源标注，指向 AWT 的技能仓库；
• date_added: "2026-09-04"——进入本仓库的日期，格式为YYYY-MM-DD。

从 data/skills_index.json 可见该技能在索引中的完整形态：类别test-automation、风险critical、收录日期2026-09-04，插件目标为codex: supported与claude: supported，且setup.type为none（即安装后无需额外配置步骤）。data/plugin-compatibility.json 中的条目与此一致，blocked_reasons为空，说明在 Codex 与 Claude 两类目标上均无障碍。

四、端到端工作流：从一句需求到可视化失败报告

文档给出的示例场景是"结账流程"（checkout flow），这也是 E2E 测试最典型的用例。将其与技能能力描述结合，一个完整的 AWT 驱动流程可以拆解为以下阶段：

① 用户/开发者提出需求

为结账流程创建并运行一个声明式浏览器测试，包含视觉断言和清晰的失败报告。

② AI 生成 YAML 场景AI 依据需求把测试意图拆解为声明式场景：进入购物车 → 点击结账 → 填写表单 → 提交订单 → 对订单确认页做视觉断言。整个过程不依赖具体的 CSS 选择器，而是表达"我要做什么、期望看到什么"。

③ AWT 交给 Playwright 执行AWT 解析 YAML，通过 Playwright 启动真实浏览器，以类人交互方式（真实点击、输入、滚动）执行每个步骤。这一步是"hands"（双手）的体现。

④ 视觉断言生效在需要验证的节点上，AWT 用 OpenCV 模板匹配检查关键 UI 元素是否按预期出现，用 OCR 从截图中提取并核对文本（例如"订单已提交""支付金额一致"）。这一步是"eyes"（眼睛）的体现，弥补了 DOM 选择器在动态渲染、Canvas 渲染场景下的失效问题。

⑤ 失败诊断与报告若步骤失败，AWT 输出结构化失败报告，附调查清单（investigation checklists），将现象、可能原因与建议排查路径一并给出。这份报告可以直接回喂给 AI 编码工具，驱动其定位问题并生成修复方案。

⑥ 经验沉淀每次失败与对应的修复模式被写入 SQLite 学习数据库，形成 failure→fix 模式库。后续遇到相似问题时，AWT 可借助历史模式加速诊断。

五、视觉匹配原理：OpenCV 模板 + OCR，绕开选择器泥潭

视觉匹配是 AWT 与"选择器驱动"测试工具最本质的差异。文档明确其实现为OpenCV template（模板匹配）+ OCR：

• OpenCV 模板匹配：预先截取目标 UI 元素（按钮、图标、卡片）作为模板，在当前页面截图中滑动匹配，定位元素出现的坐标与置信度。适合"元素形状/外观相对固定"的验证。
• OCR 文本识别：从页面截图中识别文字，用于断言"页面上出现了某段文案"、核对金额、订单号等动态文本，也用于绕过无法被 DOM 访问的渲染内容。

两者组合的收益是：测试不绑定 DOM 结构。当 React 组件重构导致data-testid失效时，只要视觉外观未变，测试依然可以稳定通过；反之，当视觉回归出现（样式错乱、元素缺失、文案错误）时，也能被敏锐捕获。这正是文档中"测试流程依赖视觉匹配或 OCR 而非稳定 DOM 选择器"这一适用场景的实现基础。

六、平台自动检测：对技术栈"即插即用"

AWT 宣称支持对Flutter、React、Next.js、Vue、Angular、Svelte的自动检测（auto-detection）。结合仓库元数据，这一能力也解释了为什么awt-e2e-testing被同时编入两个核心捆绑包：从 data/bundles.json 可见，它同时出现在core-dev（核心开发，共 494 个技能）与mobile-core（移动端核心，共 64 个技能）两个 bundle 的技能列表中（data/bundles.json、data/bundles.json）。

这一编排并非偶然：React/Next.js/Vue/Angular/Svelte 覆盖了 Web 主流的声明式框架，而 Flutter 则是跨端移动开发的主要代表。平台自动检测的意义在于——AI 不必在场景中显式声明技术栈，AWT 通过页面特征自行识别渲染框架，从而选择对应的等待策略、渲染完成判断与交互方式，降低跨框架测试的配置成本。

七、AI Provider 与 Skill Mode：两条运行路径

文档列出 AWT 支持5 个 AI Provider：Claude、OpenAI、Gemini、DeepSeek、Ollama，同时提供Skill Mode（技能模式）：

• Provider 模式：将测试过程中需要推理的环节（场景生成、失败归因、修复建议）交给所选的 LLM 服务，适合追求更强诊断能力的团队；
• Skill Mode：无需额外 AI API Key 即可运行，适合把 AWT 作为纯执行引擎嵌入已有 AI 编码工具链的场景——由宿主 AI（如 Claude/Codex 会话）负责推理，AWT 只负责"看和做"。

两条路径的存在使 AWT 既可以独立成体系，也可以作为"执行层"插件化接入现有工作流，这与 AAS 中插件兼容层（data/plugin-compatibility.json）所表达的"按目标平台声明支持"的设计理念一致。

八、风险等级与使用边界

risk: critical是本技能最重要的使用提示。按仓库的质量门槛文档（docs/contributors/quality-bar.md）与技能解剖文档（docs/contributors/skill-anatomy.md），critical意味着技能可能修改状态或触发有副作用的操作。对于 AWT 而言：

• 它在真实浏览器中执行真实交互，测试目标是结账、提交、删除类流程时会触发真实副作用；
• 因此应优先在staging 或测试环境运行，涉及真实支付/写操作的场景需谨慎授权；
• 文档的 Limitations 进一步明确：不得将输出视为环境特定验证、测试或专家评审的替代品；当所需输入、权限、安全边界或成功标准缺失时，应停止执行并请求澄清。

在 AAS 的审核体系中，风险标签属于声明性元数据，审核流程会校验其存在与形态（docs/contributors/quality-bar.md）。使用者在实际调度该技能时，应把critical视为"执行前必须确认环境与权限"的强信号。

九、在 AAS Core 中的完整定位

汇总仓库各数据层的记录，可以还原该技能在 AAS Core 中的完整画像：

从源码结构看，该技能在 AAS 中属于"社区收录 + 平台适配"型资产：它由上游ksgisang/awt-skill提供能力本体，AAS Core 通过目录索引、触发词、风险分级与插件兼容声明将其纳入可发现、可调度、可审计的技能体系。对于想为 AI 编码工作流补齐"浏览器验证"能力的团队，这是一个开箱即用的接入点——无需维护自建浏览器自动化框架，只要遵循"声明式 YAML 场景 + 视觉断言 + 结构化失败报告"的范式即可。

• AI 技能
• AI 插件