mcpField
W
webapp-testing

webapp-testing

github.com/makerjackie测试与质量140 次安装36 周前更新
代码仓库

关于 webapp-testing

用于测试本地 Web 应用的技能，指导使用 Python Playwright 编写自动化脚本，并按静态或动态页面选择检查方式。它还提供管理一个或多个开发服务器的辅助脚本。

主要功能

  1. 01使用 Python Playwright 测试 Web 应用
  2. 02辅助脚本管理单个或多个服务器
  3. 03先检查渲染后的 DOM 再执行操作
  4. 04动态页面检查前等待 networkidle
  5. 05提供元素发现等示例脚本

适用场景

  1. 01自动化测试本地 Web 应用
  2. 02同时启动前端和后端进行测试
  3. 03检查动态页面并定位页面元素
  4. 04使用 file:// URL 测试静态 HTML

安装

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

$npx skills add https://github.com/makerjackie/jackie-skills-starter --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