mcpField
W
webapp-testing

webapp-testing

github.com/sickn33测试与质量48.7k719 次安装今天更新
代码仓库

关于 webapp-testing

用于本地 Web 应用测试的技能，通过 Python Playwright 脚本检查页面并执行浏览器操作，适合开发者验证动态或静态页面。它强调先检查页面状态和辅助脚本，再进行自动化测试。

主要功能

  1. 01使用 Python Playwright 编写测试
  2. 02支持静态页面与动态应用
  3. 03辅助管理一个或多个服务器
  4. 04依据页面状态等待并执行操作
  5. 05检查 DOM 并验证页面断言

适用场景

  1. 01验证本地 Web 应用的页面行为
  2. 02在前后端服务器运行时执行浏览器测试
  3. 03检查页面元素并确定自动化选择器

安装

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

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill webapp-testing

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

附带文件LICENSE.txtscripts/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 a specific visible application-ready condition
            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.get_by_role('main').wait_for(state='visible') # replace with actual ready state
    # ... your automation logic
    browser.close()

先侦察、后操作模式

  1. 检查渲染后的 DOM：

    page.screenshot(path='APPROVED_PRIVATE_ARTIFACT_DIR/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()

  2. 根据检查结果识别选择器

  3. 使用发现的选择器执行操作

常见陷阱

应使用定位器断言检查应用的实际状态；networkidle 可能会因轮询而一直等待，也不能证明页面已完成 hydration 或业务已就绪。

最佳实践

  • 使用前检查打包脚本 - 为完成任务，请考虑 scripts/ 中是否有可用脚本。它们的允许列表并非安全边界：npm/node/python 命令可以执行任意项目代码。使用 --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 - 在自动化过程中捕获控制台日志

适用场景

当任务与概述中所述的工作流或操作相符时，可使用此技能。

限制

  • 仅当任务明确符合上述范围时，才使用此技能。
  • 不要将输出视为环境特定验证、测试或专家审查的替代品。
  • 如果缺少必要输入、权限、安全边界或成功标准，请停止并请求澄清。

服务器与测试边界

使用经授权的隔离测试数据库/账户，并将本地开发服务器绑定到 loopback。运行前请阅读项目的启动/测试脚本；可执行文件名称和参数检查无法阻止网络访问、生命周期脚本或任意 Python/JavaScript 代码执行。辅助脚本会拒绝使用已有监听器、使用有界等待，并丢弃服务器 stdout/stderr 以避免管道死锁；但 TCP 监听器只能作为就绪提示，因此请验证预期的 HTTP/页面身份。POSIX 清理会针对已启动的进程组；Windows 不保证清理子进程树，任何逃逸出其进程组的进程都需要显式清理。测试命令超时并不保证其后代进程会终止。请将截图/日志保存在获批的私有路径中，并对凭据/PII 脱敏；不要覆盖共享的 /tmp 文件。此次导入中缺少所提及的 examples 目录，因此不要声称这些脚本已打包。截图/DOM 检查通过并不代表已覆盖功能、无障碍或安全测试；请准确报告已执行的操作和断言、失败情况以及未测试的路径。

评论

支持 Markdown