mcpField
W
webapp-testing

webapp-testing

github.com/letta-ai测试与质量15237 次安装4 周前更新
代码仓库

关于 webapp-testing

webapp-testing 是一项使用原生 Python Playwright 脚本测试本地 Web 应用的技能，涵盖静态与动态页面，并提供管理一个或多个服务器的辅助脚本。

主要功能

  1. 01使用 Python Playwright 编写测试
  2. 02辅助管理服务器生命周期
  3. 03测试静态与动态页面
  4. 04操作前检查渲染后的 DOM

适用场景

  1. 01自动检查本地 Web 应用
  2. 02测试需启动多个服务器的应用
  3. 03操作前检查页面元素

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/letta-ai/skills --skill webapp-testing

安装后在 Claude Code 中输入/webapp-testing确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
examples/
console_logging.py
element_discovery.py
static_html_automation.py
scripts/
with_server.py

详细介绍

Web 应用测试

要测试本地 Web 应用，请编写原生 Python Playwright 脚本。

可用的辅助脚本：

  • scripts/with_server.py - 管理服务生命周期（支持多个服务）

始终先用 --help 运行脚本，查看用法。除非先尝试运行脚本并发现确实需要定制方案，否则不要阅读源代码。这些脚本可能非常大，会占用大量上下文窗口。它们应当直接作为黑盒脚本调用，而不是读入上下文。

决策树：选择方法

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

示例：使用 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) # Always launch chromium in headless mode
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server already running and ready
    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
    # ... your automation logic
    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()
  • 完成后始终关闭浏览器
  • 使用描述性选择器：text=、role=、CSS 选择器或 ID
  • 添加适当的等待：page.wait_for_selector() 或 page.wait_for_timeout()

参考文件

  • examples/：展示常见模式的示例：
    • element_discovery.py：发现页面上的按钮、链接和输入框
    • static_html_automation.py：使用 file:// URL 访问本地 HTML
    • console_logging.py：在自动化过程中捕获控制台日志

评论

支持 Markdown