Agent Skills
› NeverSight/learn-skills.dev
› webapp-testing
webapp-testing
GitHub基于Playwright的本地Web应用测试工具，支持动态/静态页面验证、UI调试及多服务管理。遵循“先侦查后行动”流程，通过截图和DOM检查识别选择器执行操作，高效自动化前端功能测试与问题排查。
Trigger Scenarios
需要测试本地Web应用的前端功能或UI交互
调试页面渲染异常或元素定位问题
自动化验证静态HTML文件内容
需要同时启动前后端服务进行集成测试
Install
npx skills add NeverSight/learn-skills.dev --skill webapp-testing -g -y
SKILL.md
Frontmatter
{
"name": "webapp-testing",
"description": "基于Playwright构建的本地Web应用测试工具集，支持前端功能验证、UI行为调试、页面截图及浏览器控制台日志采集。适配\"先侦查后行动\"的测试流程。"
}
Web应用测试
测试本地Web应用时，编写原生Python Playwright脚本。
可用辅助脚本：
scripts/with_server.py— 管理服务器生命周期（支持多服务器）
始终先使用 --help 运行脚本查看用法。在尝试运行脚本并发现绝对需要定制解决方案之前，不要读取源代码。这些脚本可能非常大，会污染上下文窗口。它们的存在是为了作为黑盒脚本直接调用，而不是被摄入上下文窗口。
决策树：选择方法
用户任务 → 是否为静态HTML？
├─ 是 → 直接读取HTML文件以识别选择器
│ ├─ 成功 → 使用选择器编写Playwright脚本
│ └─ 失败/不完整 → 视为动态应用（如下）
│
└─ 否（动态Web应用） → 服务器是否已在运行？
├─ 否 → 运行: python scripts/with_server.py --help
│ 然后使用辅助脚本 + 编写简化的Playwright脚本
│
└─ 是 → 侦查-然后-行动：
1. 导航并等待networkidle
2. 截图或检查DOM
3. 从渲染状态识别选择器
4. 使用发现的选择器执行操作
示例：使用 with_server.py
要启动服务器，先运行 --help，然后使用辅助脚本：
单服务器：
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
多服务器（如后端 + 前端）：
python scripts/with_server.py \
--server "cd backend && python server.py" --port 3000 \
--server "cd frontend && npm run dev" --port 5173 \
-- python your_automation.py
要创建自动化脚本，仅包含Playwright逻辑（服务器自动管理）：
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
page.goto('http://localhost:5173')
page.wait_for_load_state('networkidle')
# ... 你的自动化逻辑
browser.close()
侦查-然后-行动模式
-
检查渲染的DOM：
page.screenshot(path='/tmp/inspect.png', full_page=True) content = page.content() page.locator('button').all() -
识别选择器：从检查结果中识别选择器
-
执行操作：使用发现的选择器执行操作
常见陷阱
❌ 不要在动态应用上等待 networkidle 之前检查DOM
✅ 要在检查之前等待 page.wait_for_load_state('networkidle')
最佳实践
- 将捆绑脚本作为黑盒使用 — 要完成一项任务，考虑
scripts/中可用的脚本是否能帮助。这些脚本可靠地处理常见的复杂工作流，而不会使上下文窗口混乱。使用--help查看用法，然后直接调用。 - 使用
sync_playwright()编写同步脚本 - 完成后始终关闭浏览器
- 使用描述性选择器：
text=、role=、CSS选择器或ID - 添加适当的等待：
page.wait_for_selector()或page.wait_for_timeout()
参考文件
- examples/ — 展示常见模式的示例：
element_discovery.py— 发现页面上的按钮、链接和输入框static_html_automation.py— 使用 file:// URL处理本地HTMLconsole_logging.py— 在自动化期间捕获控制台日志
使用场景
- 自动验证前端功能：在本地开发Web应用时，用自然语言告知AI测试需求，AI自动编写Playwright脚本来模拟用户操作，反馈页面状态或内容是否符合预期。
- 调试与分析UI行为：发现页面元素渲染异常或交互行为异常时，AI执行脚本捕获截图或获取HTML内容，助力快速定位问题。
- 处理需要后台服务的复杂交互：前后端分离架构测试前端功能需后端API服务同步运行时，AI借助辅助脚本同时启动所有必需服务，再运行测试脚本。
- 测试静态HTML文件：不依赖服务器的纯静态HTML页面验证，AI编写脚本通过file://协议在浏览器中打开文件完成验证。
Version History
- e0220ca Current 2026-07-05 21:39
