Agent Skills
返回列表
💻

网页应用测试助手

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/kg-webapp-testing 技能。

技能介绍

解决的问题

本地前端经常不是“页面能不能打开”这么简单：登录按钮是否真的提交、表单提示是否出现、异步渲染后的 DOM 里选择器是否变化、控制台有没有报错，往往需要人工反复点击。这个技能把浏览器当作可复现的测试环境，而不是 UI 演示工具，适合已经跑起来的本地服务、等待异步加载的 SPA，以及需要截图或采集 console 日志的调试场景。

核心能力与工作流

它用 Playwright 编写原生 Python 脚本，默认通过 sync_playwright() 以 chromium 无头模式驱动浏览器。决策路径先区分三种情况：纯静态 HTML 可直接读文件识别选择器；动态应用且服务未启动时，应先用服务管理器统一拉起前端或前后端，例如 python 服务管理器 --server "npm run dev" --port 5173 -- python 你的脚本.py，就绪后再执行自动化；服务已启动时，直接进入 侦察—行动 流程。

核心循环是：导航后调用 page.wait_for_load_state('networkidle')，确保异步请求基本结束再观察 DOM；随后截图、读取 page.content()，列出按钮、链接和输入的定位信息；根据真实渲染结果确定选择器，再用 text=、role=、CSS 或 id 等可读定位执行点击、填写和断言。技能还要求适时使用 wait_for_selector / wait_for_timeout，并在结束时关闭浏览器。

输出与边界

最终产物是结构化 TestReport，包含 url、steps（每步 action/selector/result）、screenshot、console_errors 和 passed；同时输出选择器依据、未覆盖项和建议修复点。失败项可以交给下游 mcp-builder 做端到端工具验证。需要注意，它面向网页前端功能与 UI 行为验证，不替代后端单元测试或性能压测；遇到这类需求时应说明边界，并且不会伪造通过结果。

使用场景

  • 本地 Vite 应用启动后，需要验证登录页输入账号密码、点击登录后是否有控制台报错。
  • 调试异步渲染页面时，需要等待 networkidle 后读取 DOM 并截图确认按钮状态。
  • 需要为动态网页编写回归脚本，记录每步选择器、操作结果并生成 TestReport。
  • 排查前端页面问题时，需要采集页面截图、console 错误和未覆盖项作为证据。

适合人员

  • 前端开发者：需要在本地 SPA 中定位并回归验证 UI 交互问题。
  • 全栈工程师：想让自动化脚本检查前后端联调页面是否能正常登录和操作。
  • 测试工程师：需要通过 Playwright 脚本复现页面报错并保留截图与日志。
  • 调试型数据分析师：分析依赖浏览器渲染的网页功能时，需要可靠采集 DOM 与控制台信息。