网页应用自动化测试
测试本地网页应用，写原生 Python Playwright 脚本。
自带辅助脚本：scripts/with_server.py —— 自动管理服务器生命周期（支持同时起多个服务）。运行前先 --help 看用法，不要一上来就读源码；它作为黑盒直接调用即可。
决策树：选哪种方式
任务 → 是静态 HTML 吗？
├─ 是 → 直接读 HTML 文件找选择器
│ ├─ 找到 → 用选择器写 Playwright 脚本
│ └─ 不行/不完整 → 当成动态（见下）
└─ 否（动态 webapp）→ 服务器已经在跑了吗？
├─ 没跑 → 先跑 `python scripts/with_server.py --help`，再用辅助脚本 + 精简 Playwright 脚本
└─ 已在跑 → 侦查后行动：
1. 导航并等待 networkidle
2. 截图或检查 DOM
3. 从渲染结果里找选择器
4. 用找到的选择器执行操作
示例：用 with_server.py
起单个服务：
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) # 始终用 headless
page = browser.new_page()
page.goto('http://localhost:5173') # 服务已就绪
page.wait_for_load_state('networkidle') # 关键：等 JS 执行完
# ... 你的自动化逻辑 ...
browser.close()
侦查后行动模式
- 检查渲染后的 DOM：
python 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() - 用完务必
browser.close() - 用语义化选择器：
text=、role=>、CSS 选择器、或 ID - 加适当等待：
page.wait_for_selector()或page.wait_for_timeout()
参考示例
examples/ 目录（在发布前可附带，或把逻辑写进 SKILL.md 上文）：
- element_discovery.py —— 发现页面上的按钮、链接、输入框
- static_html_automation.py —— 用 file:// 打开本地 HTML
- console_logging.py —— 自动化时抓取控制台日志
依赖
playwright（需 pip install playwright 后 playwright install chromium）。本技能自带 scripts/with_server.py。
