⚡

Web应用测试Skill webapp-testing

这个技能专注于使用Playwright进行自动化Web应用程序测试，采用侦察先行的策略，确保测试的可靠性和可调试性，包括服务器状态验证、页面加载等待、UI测试、视觉调试等。关键词：Web应用测试，自动化测试，Playwright，侦察先行，服务器管理，UI测试，视觉调试。

测试 0 次安装 0 次浏览 更新于 3/17/2026

名称: webapp-testing 版本: 2.0.0 类别: 测试 描述: 使用Playwright进行Web应用自动化测试，包括服务器管理、UI测试、视觉调试以及侦察先行的方法。 许可证: 完整条款在LICENSE.txt中 渐进披露: 入口点: 摘要: “行动前侦察：在测试前验证服务器状态和页面加载” 使用时机: “当使用Playwright测试Web应用程序时，用于服务器验证、UI测试、前端调试。” 快速入门: “1. 使用lsof检查服务器 2. 使用with_server.py启动 3. 等待networkidle 4. 截图并验证” 参考资料: - playwright-patterns.md - server-management.md - reconnaissance-pattern.md - decision-tree.md - troubleshooting.md

Web应用测试

概述

核心原则：行动前侦察

使用Playwright进行自动化Web应用测试，专注于在采取任何操作前验证系统状态（服务器状态、页面加载、元素存在）。这确保了可靠、可调试的测试，失败时有明确原因。

关键能力：

  • 使用Playwright进行自动化浏览器测试
  • 服务器生命周期管理
  • 视觉侦察（截图、DOM检查）
  • 网络监控和调试

何时使用此技能

  • Web应用程序测试 - UI行为、表单、导航、集成测试
  • 前端调试 - 截图、DOM检查、控制台监控
  • 回归测试 - 确保更改不会破坏现有功能
  • 服务器验证 - 检查服务器是否正在运行并响应

不适用于： 单元测试（使用Jest/pytest）、负载测试或仅API测试。

铁律

行动前侦察

执行测试操作前，必须先进行：

  1. 验证服务器状态 - 使用lsof -i :PORT和curl检查
  2. 等待页面就绪 - 使用page.wait_for_load_state('networkidle')
  3. 视觉确认 - 操作前截图
  4. 读取完整输出 - 在声明成功前检查完整结果

原因： 当服务器未就绪、DOM仍在构建时选择器会失效，测试会神秘失败，5秒钟的侦察可以节省30分钟的调试时间。

快速入门

步骤1：验证服务器状态

lsof -i :3000 -sTCP:LISTEN  # 检查服务器监听
curl -f http://localhost:3000/health  # 测试响应

步骤2：启动服务器（如果需要）

# 单个服务器
python scripts/with_server.py --server "npm run dev" --port 5173 -- python test.py

# 多个服务器（后端 + 前端）
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python test.py

步骤3：编写带侦察的测试

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # 1. 导航并等待
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')  # 关键

    # 2. 侦察
    page.screenshot(path='/tmp/before.png', full_page=True)
    buttons = page.locator('button').all()
    print(f"找到 {len(buttons)} 个按钮")

    # 3. 执行
    page.click('button.submit')

    # 4. 验证
    page.wait_for_selector('.success-message')
    page.screenshot(path='/tmp/after.png', full_page=True)

    browser.close()

步骤4：验证结果

检查控制台输出、查找错误、验证状态变化、检查截图。

关键模式

服务器管理 - 检查 → 启动 → 等待 → 测试 → 清理

  • 使用with_server.py进行自动生命周期管理
  • 使用lsof和curl检查状态
  • 退出时自动清理

侦察 - 检查 → 理解 → 行动 → 验证

  • 截图当前状态
  • 检查DOM以查找元素
  • 基于发现的选择器行动
  • 视觉验证结果

等待策略 - 加载 → 空闲 → 元素 → 行动

  • 动态应用总是等待networkidle
  • 交互前等待特定元素
  • Playwright自动等待，但显式等待防止竞态条件

选择器优先级 - data-testid > 角色 > 文本 > CSS > XPath

  • [data-testid="submit"] - 最稳定
  • role=button[name="Submit"] - 语义化
  • text=Submit - 可读性强
  • button.submit - 可接受
  • XPath - 最后手段

常见陷阱

❌ 未验证服务器就测试 - 总是先检查lsof和curl ❌ 忽略超时错误 - TimeoutError意味着有问题，需要调查 ❌ 未等待networkidle - 动态应用需要完整页面加载 ❌ 选择器策略差 - 使用data-testid以保持稳定性 ❌ 缺少网络验证 - 检查API响应是否完成 ❌ 清理不完整 - 正确关闭浏览器、停止服务器

参考文档

playwright-patterns.md - 完整Playwright参考 选择器、等待、交互、断言、测试组织、网络拦截、截图、调试

server-management.md - 服务器生命周期和操作 with_server.py使用、手动管理、端口管理、进程控制、环境配置、健康检查

reconnaissance-pattern.md - 哲学和实践 为何侦察先行、完整流程、服务器检查、网络诊断、DOM检查、日志分析

decision-tree.md - 所有场景的流程图 新测试决策、服务器状态路径、测试失败诊断、调试流程、选择器/等待策略

troubleshooting.md - 常见问题解决方案 超时问题、选择器问题、服务器崩溃、网络错误、环境配置、调试工作流

示例和脚本

示例（examples/目录）：

  • element_discovery.py - 发现页面元素
  • static_html_automation.py - 测试本地HTML文件
  • console_logging.py - 捕获控制台输出

脚本（scripts/目录）：

  • with_server.py - 服务器生命周期管理（先使用--help运行）

与其他技能集成

必选： verification-before-completion 推荐： systematic-debugging, test-driven-development 相关： playwright-testing, selenium-automation

底线

  1. 侦察永远先行 - 行动前验证
  2. 永远不要跳过服务器检查 - 5秒钟可以节省30分钟
  3. 等待networkidle - 动态应用需要时间
  4. 读取完整输出 - 验证后再声明成功
  5. 截图一切 - 视觉证据是无价的

侦察后行动的模型不是可选的——它是可靠Web应用测试的基础。