mcpField
W
webapp-testing

webapp-testing

github.com/sargupta测试与质量0108 次安装6 天前更新
代码仓库

关于 webapp-testing

webapp-testing 是一项使用原生 Python Playwright 脚本测试本地 Web 应用的技能，面向编写浏览器自动化的人。它涵盖服务器管理、页面检查和交互流程。

主要功能

  1. 01使用 Python Playwright 编写测试脚本
  2. 02管理单个或多个服务器的辅助脚本
  3. 03静态与动态应用的选择流程
  4. 04渲染后 DOM 检查指引
  5. 05浏览器等待与关闭规范

适用场景

  1. 01自动检查本地 Web 应用
  2. 02为测试启动前端和后端服务器
  3. 03自动化前检查页面元素

安装

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

$npx skills add https://github.com/sargupta/sahayakai --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 脚本。

可用的辅助脚本：

  • /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/scripts/with_server.py - 管理服务生命周期（支持多个服务）

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

选择方法的决策树

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 /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/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 /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

多个服务（例如，后端 + 前端）：

python /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/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')

最佳实践

  • 将捆绑脚本作为黑盒使用 - 要完成任务时，考虑 /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/scripts/ 中的脚本是否能提供帮助。这些脚本能够可靠地处理常见的复杂工作流，同时避免占用上下文窗口。使用 --help 查看用法，然后直接调用。
  • 同步脚本使用 sync_playwright()
  • 完成后始终关闭浏览器
  • 使用描述性选择器：text=、role=、CSS 选择器或 ID
  • 添加适当的等待：page.wait_for_selector() 或 page.wait_for_timeout()

参考文件

  • /Users/sargupta/SahayakAIV2/sahayakai/sahayakai-main/.agent/skills/webapp-testing/examples/ - 展示常见模式的示例：
    • element_discovery.py - 查找页面上的按钮、链接和输入框
    • static_html_automation.py - 对本地 HTML 使用 file:// URL
    • console_logging.py - 在自动化期间捕获控制台日志

评论

支持 Markdown