# e2e测试fe

## 规则（Rules）

# 前端E2E测试规范

## 适用对象和范围

本规范适用于所有对Web前端进行E2E端到端测试、UI组件渲染测试和浏览器兼容性测试的场景。

---

## 1. 测试框架规范

**规则**：前端E2E测试必须使用Playwright框架。

- ✅ 正确：`npm install --save-dev @playwright/test`
- ❌ 错误：使用非标准E2E测试框架

**违反后果**：非标准框架可能导致浏览器驱动不兼容。

---

## 2. 多浏览器覆盖规范

**规则**：必须覆盖至少两种浏览器引擎（Chromium、Firefox、WebKit）。

- ✅ 正确：使用 `projects` 配置多浏览器
- ❌ 错误：仅测试单一浏览器

**违反后果**：单一浏览器测试无法发现跨浏览器兼容性问题。

---

## 3. 智能等待规范

**规则**：禁止在E2E测试中硬编码等待时间，必须使用智能等待。

- ✅ 正确：`page.waitForSelector('.result')`、`page.waitForURL('**/dashboard')`
- ❌ 错误：`page.waitForTimeout(3000)`

**违反后果**：硬编码等待导致测试不稳定（网络波动时容易失败）或执行时间过长。

---

## 4. 测试场景覆盖规范

**规则**：必须覆盖用户核心操作流程，包括登录、核心业务操作、页面导航和表单提交。

**违反后果**：未覆盖核心流程导致上线后关键功能出问题。

## 方法（Methods）

# 前端E2E测试方法

## 前置条件

- [ ] 前端服务已启动
- [ ] 已安装Playwright依赖

## 流程概览

分析页面结构 → 设计测试场景 → 编写测试用例 → 执行测试 → 组件渲染测试 → 浏览器兼容性测试 → 生成报告

## 详细步骤

### 步骤1：分析前端页面结构
搜索前端页面文件，提取页面路由和交互元素清单。

### 步骤2：设计E2E测试场景
基于页面路由设计用户核心操作流程的测试场景。

### 步骤3：编写E2E测试用例
编写Playwright测试脚本。

## 技巧（Tips）

# 前端E2E测试技巧

## 1. 使用page对象模型

**适用场景**：需要维护多个页面的测试用例时。

**具体做法**：为每个页面创建Page Object类，封装页面元素和操作方法。

**示例**：
```javascript
class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameInput = page.locator('input[name="username"]');
    this.passwordInput = page.locator('input[name="password"]');
    this.submitBtn = page.locator('button[type="submit"]');
  }
  
  async login(username, password) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.submitBtn.click();
  }
}
```

**注意事项**：Page Object模式提高测试代码复用性和可维护性。

---

## 2. 常见问题速查

| 问题 | 原因 | 解决方案 |
|------|------|---------|
| 元素定位失败 | 选择器错误或元素未加载 | 使用 `waitForSelector` 等待元素出现 |
| 测试不稳定 | 网络波动或异步渲染 | 使用智能等待替代固定超时 |
| 跨域问题 | 前端服务与测试环境不同源 | 配置Playwright的 `baseURL` |