webapp-testing

使用 Playwright 与本地 Web 应用程序交互和测试的工具包。支持验证前端功能、调试 UI 行为、捕获浏览器截图和查看浏览器日志。

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "webapp-testing" with this command: npx skills add marcelleon/skills-zh/marcelleon-skills-zh-webapp-testing

Web 应用程序测试

要测试本地 Web 应用程序,请编写本地 Python Playwright 脚本。

可用的辅助脚本

  • scripts/with_server.py - 管理服务器生命周期(支持多个服务器)

始终首先使用 --help 运行脚本以查看用法。在尝试运行脚本并发现绝对必要的定制解决方案之前,不要阅读源代码。这些脚本可能非常大,因此会污染您的上下文窗口。它们的存在是为了直接作为黑盒脚本调用,而不是被摄取到您的上下文窗口中。

决策树:选择您的方法

用户任务 → 它是静态 HTML 吗?
    ├─ 是 → 直接读取 HTML 文件以识别选择器
    │         ├─ 成功 → 使用选择器编写 Playwright 脚本
    │         └─ 失败/不完整 → 视为动态(见下文)
    │
    └─ 否(动态 webapp)→ 服务器是否已经运行?
        ├─ 否 → 运行:python scripts/with_server.py --help
        │        然后使用辅助程序 + 编写简化的 Playwright 脚本
        │
        └─ 是 → 侦察后行动:
            1. 导航并等待 networkidle
            2. 截图或检查 DOM
            3. 从渲染状态识别选择器
            4. 使用发现的选择器执行操作

示例:使用 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) # 始终在无头模式下启动 chromium
    page = browser.new_page()
    page.goto('http://localhost:5173') # 服务器已运行并准备就绪
    page.wait_for_load_state('networkidle') # 关键:等待 JS 执行
    # ... 您的自动化逻辑
    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 - 在自动化期间捕获控制台日志

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

xlsx

No summary provided by upstream source.

Repository SourceNeeds Review
General

frontend-design

No summary provided by upstream source.

Repository SourceNeeds Review
General

mcp-builder

No summary provided by upstream source.

Repository SourceNeeds Review
General

algorithmic-art

No summary provided by upstream source.

Repository SourceNeeds Review