前言¶
本地 dev 服务跑起来之后，很多问题只有浏览器里才会出现：按钮点了没反应、路由跳转错、控制台报错。手写 Playwright 脚本可以覆盖这些场景，但每次改 UI 都要维护选择器和启动流程，成本不低。
下面介绍 SkillHub 上的社区 Skill「网页应用自动化测试」。它把 Playwright 与网页交互、截图、读控制台等能力封装成 Agent 可遵循的 SKILL 指令，适合在 Cursor 等支持 Skills 的环境里，用自然语言触发前端验证，而不是替代完整的 E2E 测试框架。
这是什么¶
「网页应用自动化测试」是 SkillHub 坐标 @user_24e9cdd5/webapp-testing 下的社区 Skill（community），当前版本 1.0.0，分类为 dev-programming，发布者为 user_24e9cdd5。标签标明 requires_api_key=false，安装与使用不依赖额外 API Key。
定位一句话：在 Agent 对话中，用 Playwright 与本地网页应用交互，完成前端功能验证、UI 行为调试、页面截图、浏览器控制台日志抓取等任务。纯后端 API 测试不在本 Skill 范畴内。
核心功能¶
以下能力均来自 SkillHub 官方简介，可与页面对照：
- 与本地网页应用交互：在真实浏览器环境中操作页面，而非只读静态 HTML 文件。
- 前端功能验证：按你的描述检查按钮、表单、跳转等是否符合预期。
- 调试 UI 行为：观察点击、输入、导航等交互后的页面状态。
- 截图：保存当前页面视觉状态，便于对比或归档。
- 抓取浏览器控制台日志：把渲染与脚本运行时的控制台输出拉出来，辅助定位前端错误。
- 抓取渲染后 DOM、对比页面状态：适合需要「跑完 JS 之后」的 DOM，或与基准状态做差异判断的场景。
官方给出的触发词包括：测试网页、自动化点击、截图网页、验证前端、Playwright、跑一下这个网站、检查页面按钮。在对话里带上这些表述，更容易让 Agent 选用本 Skill。
安装与启用¶
SkillHub 页面提供的安装方式，是让你的 AI 按统一安装说明拉取指定坐标：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_24e9cdd5/webapp-testing。
将上述提示发给支持 SkillHub 安装的 Agent（例如 Cursor 中已配置 Skills 的会话）即可。具体目录结构、是否与项目级 .cursor/skills 并存，以 skillhub.md 中的说明为准；本文不展开各客户端差异，因当前未能从安装文档页获取完整正文。
安装前可在 SkillHub 核对元数据：版本 1.0.0，分类 dev-programming，无需 API Key。
典型用法¶
本 Skill 基于通用 SKILL.md 格式，由 Agent 读取后决定如何调用 Playwright。官方资料未附带独立示例仓库，典型用法可按「先起服务，再描述任务」来组织：
-
验证本地 dev 服务
先在本机启动前端（例如http://localhost:3000），再对 Agent 说明地址与要检查的行为，并带上触发词，例如：「用 Playwright 跑一下这个网站，检查登录页提交按钮是否可点。」 -
回归 UI
描述关键路径：打开某路由、点击某控件、断言是否出现某文案或元素。适合发版前快速扫一遍主流程。 -
截图与控制台
明确要求「截图网页」或「抓取控制台日志」，便于把结果留在对话或工作区，而不必自己开 DevTools 复现。 -
渲染后 DOM
需要 SPA hydration 之后的结构时，说明要抓的是「渲染后 DOM」或「对比页面状态」，避免与仅解析源码的用法混淆。
以上步骤依赖 Agent 已安装本 Skill，且本机环境满足 Playwright 运行条件（浏览器依赖由 Skill 内说明或 Agent 执行安装命令时处理）。
适用场景与注意¶
适合：
- 本地或内网可访问的前端 dev/staging 页面；
- 需要真人浏览器视角的点击、截图、控制台排查；
- 轻量 UI 回归或「帮我看一眼这个页面」类协作。
注意：
- 不要做纯 API 契约测试：接口层请用 Postman、pytest、REST Client 等专门手段。
- 社区来源：
source: community，行为与维护节奏以发布者更新为准，使用前在 SkillHub 看一眼版本与简介是否有变。 - 统计以 SkillHub 为准：页面展示评分 100000、下载 3715、安装 0（抓取时点数据，以后台为准）。
结尾¶
若你经常在 Agent 对话里反复描述「打开 localhost、点按钮、看控制台」，可以把「网页应用自动化测试」装进 Skills，把 Playwright 流程交给 Skill 约束，自己专注写验收标准。
- SkillHub 页面：https://www.skillhub.cn/skills/user_24e9cdd5/webapp-testing
- API 条目：https://api.skillhub.cn/user_24e9cdd5/webapp-testing
