mcpField
W
webapp-testing

webapp-testing

github.com/vudovn测试与质量8.2k319 次安装9 周前更新
代码仓库

关于 webapp-testing

面向测试团队的 Web 应用测试技能，用于审查路由、API 和用户流程。提供系统化测试方法及 Playwright 运行脚本，可执行浏览器检查、截图和无障碍检查。

主要功能

  1. 01路由与 API 发现指南
  2. 02Playwright 浏览器测试运行脚本
  3. 03截图与无障碍检查选项
  4. 04端到端、集成和组件测试指南
  5. 05视觉与 API 测试实践

适用场景

  1. 01审查应用路由和端点
  2. 02测试关键用户流程
  3. 03通过截图检查视觉变更
  4. 04为 CI 组织 Web 测试

安装

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

$npx skills add https://github.com/vudovn/ag-kit --skill webapp-testing

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

附带文件scripts/playwright_runner.py

详细介绍

Web 应用测试

全面发现并测试，不放过任何未测试的路由。

🔧 运行时脚本

运行这些脚本进行自动化浏览器测试：

脚本用途用法
scripts/playwright_runner.py基本浏览器测试python scripts/playwright_runner.py https://example.com
截图python scripts/playwright_runner.py <url> --screenshot
无障碍检查python scripts/playwright_runner.py <url> --a11y

需要： pip install playwright && playwright install chromium

1. 深度审计方法

先进行发现
目标查找方法
路由扫描 app/、pages/ 和路由文件
API 端点搜索 HTTP 方法
组件查找组件目录
功能阅读文档
系统化测试
  1. 梳理 - 列出所有路由/API
  2. 扫描 - 确认它们能正常响应
  3. 测试 - 覆盖关键路径

2. Web 测试金字塔

        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Component (Many)
                    Individual UI pieces

3. E2E 测试原则

测试内容
优先级测试
1正常流程中的用户操作
2身份验证流程
3关键业务操作
4错误处理
E2E 最佳实践
实践原因
使用 data-testid选择器稳定
等待元素出现避免测试不稳定
清理状态确保测试相互独立
避免依赖实现细节测试用户行为

4. Playwright 原则

核心概念
概念用途
页面对象模型封装页面逻辑
Fixtures可复用的测试设置
断言内置自动等待
Trace Viewer调试失败情况
配置
设置建议
重试次数在 CI 中设为 2
Traceon-first-retry
截图on-failure
视频retain-on-failure

5. 视觉测试

适用场景
场景价值
设计系统高
营销页面高
组件库中
动态内容较低
策略
  • 基准截图
  • 在变更时进行比较
  • 检查视觉差异
  • 更新有意进行的变更

6. API 测试原则

覆盖范围
范围测试
状态码200、400、404、500
响应结构符合架构
错误消息对用户友好
边界情况空值、大数据、特殊字符

7. 测试组织

文件结构
tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data
命名约定
模式示例
按功能划分login.spec.ts
描述性命名user-can-checkout.spec.ts

8. CI 集成

流水线步骤
  1. 安装依赖
  2. 安装浏览器
  3. 运行测试
  4. 上传产物（跟踪记录、截图）
并行化
策略用途
按文件Playwright 默认方式
分片大型测试套件
工作进程多个浏览器

9. 反模式

❌ 不要✅ 应该
测试实现细节测试行为
硬编码等待时间使用自动等待
跳过清理隔离测试
忽略不稳定的测试修复根本原因

请记住： E2E 测试开销很大，仅用于关键路径。

评论

支持 Markdown