02 Web 应用测试模式：侦察-再行动与服务器生命周期管理

02 Web 应用测试模式：侦察-再行动与服务器生命周期管理

学习目标

• 理解 webapp-testing 技能中的决策树流程
• 掌握侦察-再行动（Reconnaissance-Then-Action）模式
• 学习服务器生命周期管理（with_server.py）
• 分析黑盒脚本调用模式的上下文优化策略

前置知识

本章涉及 Skill 渐进式知识管理的通用原理，建议先阅读：

• Skill 渐进式知识管理

下文假设你已理解上述概念，直接聚焦 webapp-testing 技能的具体实现。

---

项目实践

决策树：从任务类型到测试策略

webapp-testing 技能在 SKILL.md 中嵌入了一个精确的决策树：

关键洞察：这个决策树的核心是将”静态 HTML”与”动态 WebApp”分离。静态 HTML 可以直接读取文件获取选择器，动态 WebApp 必须等 JavaScript 执行后扫描 DOM。

侦察-再行动模式

这个模式分为四步：

1. 检查渲染的 DOM：

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

2. 从检查结果中识别选择器

3. 使用发现的选择器执行操作

4. 验证结果

最关键的步骤：在检查 DOM 之前必须 page.wait_for_load_state('networkidle')。这是动态应用最常见的错误——在 JavaScript 完成执行前检查 DOM。

with_server.py：服务器生命周期管理

with_server.py 是一个 Python 辅助脚本，管理服务器生命周期：

# 单服务器
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 逻辑（服务器自动管理）
• 支持多个 --server 参数，处理前端/后端分离的应用
• 先 --help 查看用法，再直接使用——不要读源码

黑盒脚本调用模式

webapp-testing 技能的核心原则：

Always run scripts with --help first to see usage. DO NOT read the source until you try running the script first and found that a customized solution is absolutely necessary. These scripts can be very large and thus pollute your context window.

这个模式解决了 LLM Agent 的一个核心问题：辅助脚本包含的代码量可能远超实际需要的定制逻辑。通过先作为黑盒执行，Agent 只在黑盒无法满足需求时才读取源码定制，避免了上下文窗口的浪费。

---

问题与规避

DOM 检查前未等待 networkidle

问题：在动态应用中，DOM 在 JavaScript 执行前是空的或不完整的。

规避策略：始终在检查 DOM 前调用 page.wait_for_load_state('networkidle')。

静态选择器在动态页面上失效

问题：使用 CSS 选择器（如 .btn-primary）在 SPA 中可能因为动态渲染而失效。

规避策略：使用 text=、role= 等语义选择器，而非 CSS 类名。

脚本源码污染上下文

问题：读取大型辅助脚本的源码会消耗大量上下文窗口。

规避策略：先 --help，再直接执行。只有当定制方案绝对必要时才读取源码。

---

设计取舍

为什么用 Python Playwright 而非其他方案？

优势：Playwright 提供同步和异步 API；支持 Chromium/Firefox/WebKit；wait_for_load_state 等高级等待器。 代价：需要 Python 环境。 Anthropic 的选择：Python Playwright 是 Agent 自动化的最佳平衡——浏览器自动化质量 + 脚本编写便利性。

---

参考来源

• Anthropic Skills 仓库：skills/webapp-testing/SKILL.md
• Playwright Python：https://playwright.dev/python/