Back to Details

webapp-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Web App Testing

Web应用测试

Discover and test everything. Leave no route untested.
发现并测试所有内容，不要遗漏任何路由。

🔧 Runtime Scripts

🔧 运行时脚本

Execute these for automated browser testing:
ScriptPurposeUsage
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
执行以下脚本以进行自动化浏览器测试：
Script用途使用方式
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. Deep Audit Approach

1. 深度审计方法

Discovery First

先进行发现

TargetHow to Find
RoutesScan app/, pages/, router files
API endpointsGrep for HTTP methods
ComponentsFind component directories
FeaturesRead documentation
目标查找方式
路由扫描app/、pages/、路由文件
API端点搜索HTTP方法
组件查找组件目录
功能阅读文档

Systematic Testing

系统化测试

  1. Map - List all routes/APIs
  2. Scan - Verify they respond
  3. Test - Cover critical paths
  1. 梳理 - 列出所有路由/API
  2. 扫描 - 验证它们是否正常响应
  3. 测试 - 覆盖关键路径

2. Testing Pyramid for Web

2. Web应用测试金字塔

        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Component (Many)
                    Individual UI pieces
        /\          E2E (少量)
       /  \         关键用户流程
      /----\
     /      \       集成测试（部分）
    /--------\      API、数据流
   /          \
  /------------\    组件测试（大量）
                    独立UI片段

3. E2E Test Principles

3. E2E测试原则

What to Test

测试内容

PriorityTests
1Happy path user flows
2Authentication flows
3Critical business actions
4Error handling
优先级测试项
1用户流程顺畅路径
2认证流程
3关键业务操作
4错误处理

E2E Best Practices

E2E测试最佳实践

PracticeWhy
Use data-testidStable selectors
Wait for elementsAvoid flaky tests
Clean stateIndependent tests
Avoid implementation detailsTest user behavior
实践方式原因
使用data-testid稳定的选择器
等待元素加载避免不稳定的测试
清理测试状态保证测试独立性
避免测试实现细节测试用户行为

4. Playwright Principles

4. Playwright测试原则

Core Concepts

核心概念

ConceptUse
Page Object ModelEncapsulate page logic
FixturesReusable test setup
AssertionsBuilt-in auto-wait
Trace ViewerDebug failures
概念用途
Page Object Model封装页面逻辑
Fixtures可复用的测试设置
Assertions内置自动等待
Trace Viewer调试失败案例

Configuration

配置

SettingRecommendation
Retries2 on CI
Traceon-first-retry
Screenshotson-failure
Videoretain-on-failure
设置项推荐配置
重试次数CI环境下重试2次
追踪首次重试时启用
截图测试失败时启用
录屏失败时保留录屏

5. Visual Testing

5. 视觉测试

When to Use

适用场景

ScenarioValue
Design systemHigh
Marketing pagesHigh
Component libraryMedium
Dynamic contentLower
场景价值
设计系统高价值
营销页面高价值
组件库中等价值
动态内容较低价值

Strategy

策略

  • Baseline screenshots
  • Compare on changes
  • Review visual diffs
  • Update intentional changes
  • 基准截图
  • 在变更时进行对比
  • 审核视觉差异
  • 更新有意的变更

6. API Testing Principles

6. API测试原则

Coverage Areas

覆盖范围

AreaTests
Status codes200, 400, 404, 500
Response shapeMatches schema
Error messagesUser-friendly
Edge casesEmpty, large, special chars
领域测试项
状态码200, 400, 404, 500
响应结构符合数据模型
错误信息对用户友好
边缘案例空值、大体积数据、特殊字符

7. Test Organization

7. 测试组织

File Structure

文件结构

tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data
tests/
├── e2e/           # 完整用户流程
├── integration/   # API、数据
├── component/     # UI单元
└── fixtures/      # 共享数据

Naming Convention

命名规范

PatternExample
Feature-based
login.spec.ts
Descriptive
user-can-checkout.spec.ts
模式示例
基于功能
login.spec.ts
描述性命名
user-can-checkout.spec.ts

8. CI Integration

8. CI集成

Pipeline Steps

流水线步骤

  1. Install dependencies
  2. Install browsers
  3. Run tests
  4. Upload artifacts (traces, screenshots)
  1. 安装依赖
  2. 安装浏览器
  3. 运行测试
  4. 上传产物（追踪文件、截图）

Parallelization

并行化

StrategyUse
Per filePlaywright default
ShardingLarge suites
WorkersMultiple browsers
策略适用场景
按文件Playwright默认方式
分片大型测试套件
多工作进程多浏览器测试

9. Anti-Patterns

9. 反模式

❌ Don't✅ Do
Test implementationTest behavior
Hardcode waitsUse auto-wait
Skip cleanupIsolate tests
Ignore flaky testsFix root cause
Remember: E2E tests are expensive. Use them for critical paths only.
❌ 不要做✅ 应该做
测试实现细节测试行为
硬编码等待使用自动等待
跳过清理工作隔离测试
忽略不稳定测试修复根本原因
注意： E2E测试成本较高，仅用于关键路径测试。