webapp-testing

用途

webapp-testing 是一个用于与本地 Web 应用交互并进行测试的工具包，基于 Playwright 构建。它面向需要验证前端功能、调试 UI 行为、捕获截图以及编写端到端（E2E）测试的开发者，提供了一套较为完整的测试模式与配置参考。

主要能力

该工具包覆盖以下测试相关能力：

• 快速开始：提供 Python（sync_playwright）与 JavaScript/TypeScript（@playwright/test）两种初始化示例。
• 服务器管理：通过辅助脚本 scripts/with_server.py 启动单个或多个本地服务器，并指定端口后运行测试脚本。
• Playwright 配置：给出 playwright.config.ts 示例，包含测试目录、并行、重试、报告器、baseURL、trace、截图以及多浏览器项目（chromium、firefox、webkit、Mobile Chrome、Mobile Safari）和 webServer 配置。
• 选择器最佳实践：推荐使用 test ID、role、label、文本内容等选择器，避免脆弱的 CSS 选择器，并支持选择器链式调用与过滤。
• 常见测试模式：涵盖认证流程（登录、错误凭据、登出）、表单提交与校验、导航测试、CRUD 操作、模态框/对话框测试。
• 等待策略：包括显式等待（元素、状态、导航、网络、加载状态）与 Playwright 自动等待机制。
• 断言：常见断言（可见性、文本、属性、输入值、数量、页面级断言）以及软断言。
• API 测试集成：模拟 API 响应、处理 API 错误、等待 API 调用。
• 视觉测试：整页与元素截图对比，以及截图选项（禁用动画、遮罩动态内容）。
• 认证状态复用：保存登录状态并在测试项目中复用。
• 无障碍测试：结合 @axe-core/playwright 进行 a11y 违规检查。
• 性能测试：页面加载时间与 Core Web Vitals（如 LCP）检查。
• 调试辅助：命令行调试（headed、debug、指定测试、查看报告）与测试内调试（暂停、截图、输出内容、调整超时），以及捕获浏览器控制台日志。
• 测试组织：给出测试文件结构示例。

使用方式

1. 安装并配置 Playwright（Python 或 JavaScript/TypeScript）。
2. 如需启动本地服务器，可使用辅助脚本，例如：
   • 单服务器：python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_test.py
   • 多服务器：python scripts/with_server.py --server "cd backend && python server.py" --port 3000 --server "cd frontend && npm run dev" --port 5173 -- python your_test.py
3. 参考 playwright.config.ts 配置测试目录、浏览器项目与 webServer。
4. 编写测试时优先使用 test ID、role、label 等选择器，并利用自动等待与断言。
5. 可通过 npx playwright test --headed、--debug、-g "test name"、npx playwright show-report 等命令运行与调试。

适用场景

• 本地 Web 应用的前端功能验证与 UI 行为调试。
• 编写端到端测试，覆盖认证、表单、导航、CRUD、模态框等交互。
• 需要模拟 API 响应、进行视觉回归、无障碍检查或性能指标检查的测试场景。
• 需要复用登录状态、组织多浏览器测试项目的团队。

限制

资料中未提供关于收费、价格、平台支持范围、具体效果或性能保证的说明，这些信息暂未提供。使用前需自行确认 Playwright 及相关依赖的安装与环境要求。