mcpField
W
webapp-testing

webapp-testing

github.com/snyk测试与质量3.2k94 次安装3 天前更新
代码仓库

关于 webapp-testing

webapp-testing 是面向本地 Web 应用测试的技能，指导使用 Python Playwright 编写自动化脚本。它提供服务器生命周期辅助脚本的使用流程，并涵盖动态页面检查和交互测试。

主要功能

  1. 01使用 Python Playwright 测试
  2. 02辅助管理本地服务器
  3. 03检查渲染后的页面
  4. 04执行页面交互自动化
  5. 05处理动态页面等待

适用场景

  1. 01测试本地静态 HTML 页面
  2. 02验证动态 Web 应用流程
  3. 03同时启动前后端进行测试

安装

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

$npx skills add https://github.com/snyk/agent-scan --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