网页应用自动化测试

测试本地网页应用，写原生 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()

侦查后行动模式

1. 检查渲染后的 DOM：

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. 从检查结果里确定选择器
3. 用发现的选择器执行操作

常见坑

❌ 动态应用没等 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。