🎭 E2E 测试策略

欢迎来到 E2E 测试策略教程！在本课程中，你将学习如何使用 Playwright 设计和实施端到端测试 — 像真实用户一样验证你的应用。

前置知识

建议先完成 TDD 大师课，了解测试驱动开发的基本概念。

🎮 体验 E2E 测试命令

E2E 测试模拟真实用户操作。试试这些命令：

ECC Command Simulator

❯

Available Commands:

📚 E2E 测试设计三步法

从用户旅程到 Playwright 测试

Step 1 of 4

第一步：定义用户旅程

E2E 测试的起点不是代码，而是用户故事。想象一个真实用户会如何使用你的应用 — 从打开页面到完成目标。用户旅程就像一份"导游路线图"。

// User Journey: Login Flow
// 
// As a registered user,
// I want to log in to my account,
// So that I can access my dashboard.
//
// Steps:
// 1. Navigate to /login
// 2. Enter email in email field
// 3. Enter password in password field
// 4. Click "Login" button
// 5. Verify redirect to /dashboard
// 6. Verify welcome message shows username

💡每个用户旅程对应一个 test() 函数。先写注释，再写代码！

💻 编写你的第一个 Playwright 测试

在代码实验室中编写一个完整的 E2E 测试。尝试为一个搜索功能编写用户旅程测试：

Playwright E2E 测试typescript

// tests/search.spec.ts
import { test, expect } from '@playwright/test'

// Page Object for Search
class SearchPage {
constructor(private page) {}

// Locators
get searchInput() {
  return this.page.getByPlaceholder('Search docs...')
}
get searchResults() {
  return this.page.getByTestId('search-results')
}
get resultItems() {
  return this.page.getByRole('listitem')
}
get noResults() {
  return this.page.getByText('No results found')
}

// Actions
async search(query: string) {
  await this.searchInput.fill(query)
  await this.searchInput.press('Enter')
}
}

// User Journey: Search Documentation
test.describe('Search Flow', () => {

test('should find results for valid query', async ({ page }) => {
  const searchPage = new SearchPage(page)
  await page.goto('/')

// User types a search query
  await searchPage.search('hooks')

// Should show relevant results
  await expect(searchPage.searchResults).toBeVisible()
  await expect(searchPage.resultItems).toHaveCount(3)
})

test('should show empty state for no results', async ({ page }) => {
  const searchPage = new SearchPage(page)
  await page.goto('/')

// User types a query with no matches
  await searchPage.search('xyznonexistent')

// Should show friendly empty state
  await expect(searchPage.noResults).toBeVisible()
})

// Try adding more test cases:
// - Test keyboard navigation (Tab, Enter)
// - Test search suggestions/autocomplete
// - Test clearing search
})

❓ 知识检测

❓

E2E 测试的第一步应该是什么？

A编写 Playwright 测试代码

B创建 Page Object

C定义用户旅程

D配置 playwright.config.ts

❓

Page Object 模式的最大优势是什么？

A让测试运行更快

B减少浏览器启动时间

C将页面交互封装为可复用的接口，提高可维护性

D自动生成测试用例

❓

以下哪种 Playwright 选择器最推荐使用？

Apage.locator(".btn-primary")

Bpage.locator("#login-btn")

Cpage.getByRole("button", { name: "Login" })

Dpage.locator("div > form > button:nth-child(2)")

🎉 恭喜！

你已完成 E2E 测试策略教程！你掌握了：

✅ 用户旅程驱动的测试设计
✅ Page Object 模式封装
✅ Playwright 测试编写（AAA 模式）
✅ 网络拦截与视觉回归
✅ 最佳选择器策略

📖 下一步

多智能体工作流 - 学习智能体编排
自定义 Hooks 开发 - 创建自动化钩子
高级主题：性能优化 - 深入性能调优

🎮 体验 E2E 测试命令​

📚 E2E 测试设计三步法​

从用户旅程到 Playwright 测试

第一步：定义用户旅程

💻 编写你的第一个 Playwright 测试​

❓ 知识检测​