Web应用测试指南：Playwright自动化、E2E测试与视觉测试最佳实践

webapp-testing by vudovn/antigravity-kit

144 周安装量

6,900 GitHub Stars

GitHub

安装命令

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

自动化 Web应用测试

🇨🇳中文介绍

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`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

1. 深度审计方法

目标	如何查找
路由	扫描 app/, pages/, 路由文件
API 端点	使用 grep 查找 HTTP 方法
组件	查找组件目录
功能	阅读文档

映射 - 列出所有路由/API
扫描 - 验证它们有响应
测试 - 覆盖关键路径

2. Web 测试金字塔

        /\          E2E (少量)
       /  \         关键用户流程
      /----\
     /      \       集成测试 (适量)
    /--------\      API，数据流
   /          \
  /------------\    组件测试 (大量)
                    独立的 UI 部件

优先级	测试
1	用户快乐路径流程
2	认证流程
3	关键业务操作
4	错误处理

实践	原因
使用 data-testid	稳定的选择器
等待元素	避免不稳定的测试
清理状态	独立的测试
避免实现细节	测试用户行为

4. Playwright 原则

概念	用途
页面对象模型	封装页面逻辑
夹具	可重用的测试设置
断言	内置自动等待
跟踪查看器	调试失败

设置	建议
重试	CI 上 2 次
跟踪	on-first-retry
截图	on-failure
视频	retain-on-failure

场景	价值
设计系统	高
营销页面	高
组件库	中
动态内容	较低

基线截图
在变更时比较
审查视觉差异
更新预期的变更

范围	测试
状态码	200, 400, 404, 500
响应结构	匹配模式
错误信息	用户友好
边界情况	空值、大值、特殊字符

tests/
├── e2e/           # 完整用户流程
├── integration/   # API，数据
├── component/     # UI 单元
└── fixtures/      # 共享数据

模式	示例
基于功能	`login.spec.ts`
描述性	`user-can-checkout.spec.ts`

安装依赖
安装浏览器
运行测试
上传产物（跟踪记录、截图）

策略	用途
按文件	Playwright 默认
分片	大型测试套件
工作进程	多浏览器

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

记住： E2E 测试成本高昂。仅将其用于关键路径。

🇺🇸English

Web App Testing

Discover and test everything. Leave no route untested.

🔧 Runtime Scripts

Execute these for automated browser testing:

Script	Purpose	Usage
`scripts/playwright_runner.py`	Basic browser test	`python scripts/playwright_runner.py https://example.com`
With screenshot	`python scripts/playwright_runner.py <url> --screenshot`
Accessibility check	`python scripts/playwright_runner.py <url> --a11y`

Requires: pip install playwright && playwright install chromium

1. Deep Audit Approach

Discovery First

Target	How to Find
Routes	Scan app/, pages/, router files
API endpoints	Grep for HTTP methods
Components	Find component directories
Features	Read documentation

Systematic Testing

Map - List all routes/APIs
Scan - Verify they respond
Test - Cover critical paths

2. Testing Pyramid for Web

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

3. E2E Test Principles

What to Test

Priority	Tests
1	Happy path user flows
2	Authentication flows
3	Critical business actions
4	Error handling

E2E Best Practices

Practice	Why
Use data-testid	Stable selectors
Wait for elements	Avoid flaky tests
Clean state	Independent tests
Avoid implementation details	Test user behavior

4. Playwright Principles

Core Concepts

Concept	Use
Page Object Model	Encapsulate page logic
Fixtures	Reusable test setup
Assertions	Built-in auto-wait
Trace Viewer	Debug failures

Configuration

Setting	Recommendation
Retries	2 on CI
Trace	on-first-retry
Screenshots	on-failure
Video	retain-on-failure

5. Visual Testing

When to Use

Scenario	Value
Design system	High
Marketing pages	High
Component library	Medium
Dynamic content	Lower

Strategy

Baseline screenshots
Compare on changes
Review visual diffs
Update intentional changes

6. API Testing Principles

Coverage Areas

Area	Tests
Status codes	200, 400, 404, 500
Response shape	Matches schema
Error messages	User-friendly
Edge cases	Empty, large, special chars

7. Test Organization

File Structure

tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data

Naming Convention

Pattern	Example
Feature-based	`login.spec.ts`
Descriptive	`user-can-checkout.spec.ts`

8. CI Integration

Pipeline Steps

Install dependencies
Install browsers
Run tests
Upload artifacts (traces, screenshots)

Parallelization

Strategy	Use
Per file	Playwright default
Sharding	Large suites
Workers	Multiple browsers

9. Anti-Patterns

❌ Don't	✅ Do
Test implementation	Test behavior
Hardcode waits	Use auto-wait
Skip cleanup	Isolate tests
Ignore flaky tests	Fix root cause

Remember: E2E tests are expensive. Use them for critical paths only.

Weekly Installs

131

Repository

vudovn/antigravity-kit

GitHub Stars

6.7K

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

gemini-cli109

codex107

opencode104

cursor97

github-copilot96

claude-code83

Skills CLI 使用指南：AI Agent 技能包管理器安装与管理教程

43,100 周安装

Web应用测试指南：Playwright自动化、E2E测试与视觉测试最佳实践

🇨🇳中文介绍

Web 应用测试

🔧 运行时脚本

相关 Skills

1. 深度审计方法

先探索

系统化测试

2. Web 测试金字塔

3. E2E 测试原则

测试内容

E2E 最佳实践

4. Playwright 原则

核心概念

配置

5. 视觉测试

何时使用

策略

6. API 测试原则

覆盖范围

7. 测试组织

文件结构

命名约定

8. CI 集成

流水线步骤

并行化

9. 反模式