e2e-testing-automation

端到端测试自动化

目录

• 概述
• 适用场景
• 快速入门
• 参考指南
• 最佳实践

概述

端到端（E2E）测试会验证从 UI 到所有后端系统的完整用户工作流，确保从用户的角度来看，整个应用程序堆栈能够正确协同工作。E2E 测试会模拟用户通过浏览器进行的真实交互，包括身份验证、导航、表单提交和结果验证。

适用场景

• 测试关键用户流程（注册、结账、登录）
• 验证多步骤工作流
• 在不同浏览器和设备上进行测试
• 针对 UI 变更进行回归测试
• 验证前端与后端的集成
• 测试真实用户交互（点击、输入、滚动）
• 对部署进行冒烟测试

快速入门

最小可运行示例：

// tests/e2e/checkout.spec.ts
import { test, expect, Page } from "@playwright/test";

test.describe("E-commerce Checkout Flow", () => {
  let page: Page;

  test.beforeEach(async ({ page: p }) => {
    page = p;
    await page.goto("/");
  });

  test("complete checkout flow as guest user", async () => {
    // 1. Browse and add product to cart
    await page.click("text=Shop Now");
    await page.click('[data-testid="product-1"]');
    await expect(page.locator("h1")).toContainText("Product Name");

    await page.click('button:has-text("Add to Cart")');
    await expect(page.locator(".cart-count")).toHaveText("1");

    // 2. Go to cart and proceed to checkout
    await page.click('[data-testid="cart-icon"]');
    await expect(page.locator(".cart-item")).toHaveCount(1);
    await page.click("text=Proceed to Checkout");

// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南	内容
Playwright E2E 测试	Playwright E2E 测试
Cypress E2E 测试	Cypress E2E 测试
使用 Python（pytest）的 Selenium	使用 Python（pytest）的 Selenium
页面对象模型模式	页面对象模型模式

最佳实践

✅ 应该做

• 使用 data-testid 属性作为稳定的选择器
• 实施页面对象模型，便于维护
• 彻底测试关键用户流程
• 在多个浏览器中运行测试（跨浏览器测试）
• 使用显式等待，而不是 sleep/timeout
• 在每次测试后清理测试数据
• 在测试失败时截取屏幕截图
• 尽可能并行执行测试

❌ 不应该做

• 使用脆弱的 CSS 选择器（如 nth-child）
• 测试所有可能的 UI 组合（重点关注关键路径）
• 在测试之间共享状态
• 使用固定延迟（sleep/timeout）
• 忽略不稳定的测试
• 将 E2E 测试用于单元级测试
• 详细测试第三方 UI 组件
• 跳过移动设备/响应式测试