mcpField
W
webapp-testing

webapp-testing

github.com/warpdotdev测试与质量823192 次安装28 周前更新
代码仓库

关于 webapp-testing

webapp-testing 是一项使用原生 Python Playwright 脚本测试本地 Web 应用的技能，涵盖静态页面与动态应用，并可在自动化期间管理一个或多个服务。

主要功能

  1. 01使用 Python Playwright 编写测试脚本
  2. 02管理单个或多个服务的生命周期
  3. 03按渲染后的 DOM 检查页面
  4. 04区分静态 HTML 与动态应用的测试方式

适用场景

  1. 01自动化本地 Web 应用交互
  2. 02同时测试前端和后端服务
  3. 03检查页面并定位元素选择器

安装

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

$npx skills add https://github.com/warpdotdev/oz-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 - 对本地 HTML 使用 file:// URL
    • console_logging.py - 在自动化过程中捕获控制台日志

评论

支持 Markdown