Playwright 测试计划
一、测试概述
本文档定义了 VitePress 技术博客的 E2E 测试计划，使用 Playwright 框架。
二、测试范围
| 类别 | 测试项 | 优先级 |
|---|---|---|
| 页面加载 | 各页面 HTTP 200 | P0 |
| 首页 | Hero, Features, Actions | P0 |
| 导航 | 顶部导航、侧边栏 | P0 |
| 文章 | 内容渲染、链接跳转 | P0 |
| SEO | Meta 标签 | P1 |
| 响应式 | 移动端布局 | P2 |
三、测试用例
3.1 页面加载测试
| 用例 ID | 描述 | 预期结果 |
|---|---|---|
| TC-001 | 访问首页 | HTTP 200, 标题包含"技术博客" |
| TC-002 | 访问文章列表 | HTTP 200, 侧边栏显示 |
| TC-003 | 访问文章详情 | HTTP 200, 内容显示 |
| TC-004 | 访问关于页 | HTTP 200, 内容显示 |
3.2 首页测试
| 用例 ID | 描述 | 预期结果 |
|---|---|---|
| TC-101 | Hero 标题 | 显示"技术博客" |
| TC-102 | Hero 副标题 | 显示"探索技术的无限可能" |
| TC-103 | Features 数量 | 3 个特性卡片 |
| TC-104 | Actions 按钮 | "开始阅读"、"关于我"按钮存在 |
3.3 导航测试
| 用例 ID | 描述 | 预期结果 |
|---|---|---|
| TC-201 | 顶部导航栏 | 存在"首页"、"文章"、"关于"链接 |
| TC-202 | 导航跳转 | 点击"文章"跳转至 /posts/ |
| TC-203 | 侧边栏 | 显示文章列表 |
3.4 链接测试
| 用例 ID | 描述 | 预期结果 |
|---|---|---|
| TC-301 | 外部链接 | GitHub 链接可访问 |
| TC-302 | 内部链接 | 无 404 错误 |
3.5 SEO 测试
| 用例 ID | 描述 | 预期结果 |
|---|---|---|
| TC-401 | Meta description | 存在且非空 |
| TC-402 | Title 标签 | 正确设置 |
四、测试文件结构
tests/
├── blog.spec.ts # 主测试文件
└── playwright.config.ts # 配置文件五、运行命令
bash
# 安装 Playwright 浏览器
npx playwright install chromium
# 运行所有测试
npx playwright test
# 运行指定测试
npx playwright test tests/blog.spec.ts
# UI 模式
npx playwright test --ui六、环境要求
- Node.js 18+
- Playwright 1.59+
- 开发服务器运行在本地 5174 端口