Story 10.2: 编写订单列表查看测试

Status: done

Story

作为测试开发者，我想要编写订单列表查看的 E2E 测试，以便验证订单列表的基本功能和数据展示。

Acceptance Criteria

Given 订单管理 Page Object 已创建 When 编写订单列表查看测试用例 Then 验证订单列表按预期加载 And 验证订单数据的正确展示（订单名称、平台、公司、渠道、状态等） And 验证订单状态徽章显示正确（草稿、已确认、进行中等） And 验证工作状态徽章显示正确（未就业、待就业、已就业、已离职） And 验证分页功能 And 测试在真实浏览器中通过

测试文件: web/tests/e2e/specs/admin/order-list.spec.ts

Tasks / Subtasks

创建订单列表测试文件 (AC: When)
- 创建 web/tests/e2e/specs/admin/order-list.spec.ts
- 导入必要的测试依赖（Playwright fixtures、OrderManagementPage）
- 配置测试文件的基本结构
编写订单列表加载验证测试 (AC: Then)
- 测试页面标题正确显示
- 测试新增订单按钮可见
- 测试订单列表表格存在
- 测试搜索框和筛选按钮可见
编写订单数据展示验证测试 (AC: And)
- 验证订单名称列显示正确
- 验证平台列显示正确
- 验证公司列显示正确
- 验证渠道列显示正确
- 验证预计开始日期列显示正确
编写订单状态徽章验证测试 (AC: And)
- 验证草稿状态徽章显示
- 验证已确认状态徽章显示
- 验证进行中状态徽章显示
- 验证已完成状态徽章显示
- 验证徽章样式/颜色正确（如有）
编写工作状态徽章验证测试 (AC: And)
- 验证未就业状态徽章显示
- 验证待就业状态徽章显示
- 验证已就业状态徽章显示
- 验证已离职状态徽章显示
编写分页功能验证测试 (AC: And)
- 验证分页控件存在（如适用）
- 验证分页信息显示（如"共 X 条记录"）
- 验证可以切换页码（如适用）
- 验证每页显示数量选择器（如适用）
确保所有测试通过 (AC: And)

Dev Notes

Epic Context

Epic 10: 订单管理 E2E 测试 (Epic C - 业务测试 Epic)

目标: 测试开发者可以为订单管理功能编写完整的 E2E 测试，验证订单的 CRUD、状态流转、人员关联和附件管理功能
业务分组: Epic C（业务测试 Epic）
背景: 订单管理是招聘系统的核心业务功能，涉及复杂表单（多选择器联动）、状态流转、人员关联等场景
模式: 业务测试为主，工具包支持为辅（遵循 Epic A 成功模式）

依赖:

Epic 1: ✅ 已完成（Select 工具基础框架）
Epic 2: ✅ 已完成（Select 工具在真实 E2E 测试中验证）
Story 10.1: ✅ 已完成（订单管理 Page Object）

订单管理功能概述

根据 epics.md，订单管理涉及以下核心功能：

订单列表: 查看、搜索、筛选、分页
订单状态流转: 草稿 → 已确认 → 进行中 → 已完成
工作状态: 未就业 → 待就业 → 已就业 → 已离职
订单数据字段: 订单名称、平台、公司、渠道、预计开始日期、订单状态、工作状态

前序 Story 情报 (Story 10.1)

已创建的 Page Object 功能:

web/tests/e2e/pages/admin/order-management.page.ts 包含以下功能：

页面基础功能:
- goto() - 导航到订单管理页面
- expectToBeVisible() - 验证关键元素可见
- 页面选择器：pageTitle、addOrderButton、orderTable、searchInput、searchButton
订单列表选择器:
- pageTitle - 页面标题（"订单管理"）
- addOrderButton - 新增订单按钮
- orderTable - 订单列表表格
- searchInput - 搜索输入框
- searchButton - 搜索按钮
类型定义:
- ORDER_STATUS - 订单状态常量（draft、confirmed、in_progress、completed）
- ORDER_STATUS_LABELS - 订单状态显示名称映射
- WORK_STATUS - 工作状态常量（not_employed、pending、employed、resigned）
- WORK_STATUS_LABELS - 工作状态显示名称映射

订单状态和工作状态映射:

// 订单状态
ORDER_STATUS_LABELS = {
  draft: '草稿',
  confirmed: '已确认',
  in_progress: '进行中',
  completed: '已完成',
}

// 工作状态
WORK_STATUS_LABELS = {
  not_employed: '未就业',
  pending: '待就业',
  employed: '已就业',
  resigned: '已离职',
}

测试文件结构参考

参考 Story 8.2（区域列表查看测试）和 Story 9.x（残疾人管理测试）的测试结构：

import { test, expect } from '@playwright/test';
import { OrderManagementPage } from '../../pages/admin/order-management.page';

test.describe('订单列表查看', () => {
  let orderPage: OrderManagementPage;

  test.beforeEach(async ({ page }) => {
    orderPage = new OrderManagementPage(page);
    await orderPage.goto();
  });

  test('应该显示订单管理页面标题', async () => {
    // 测试实现
  });

  test('应该显示订单列表表格', async () => {
    // 测试实现
  });

  // 更多测试...
});

订单列表页面元素（基于 Story 10.1）

订单列表页面结构:

页面路径: /admin/orders
页面标题: "订单管理"
新增订单按钮: "新增订单"
搜索输入框: placeholder="搜索订单名称"
搜索按钮: "搜索"
订单列表表格: 显示订单数据

订单列表表格列（预期）:

订单名称
平台
公司
渠道
预计开始日期
订单状态（徽章显示）
工作状态（徽章显示）
操作按钮（编辑、删除、详情、人员等）

技术要求

导入依赖:

import { test, expect } from '@playwright/test';
import { OrderManagementPage } from '../../pages/admin/order-management.page';

测试 Fixtures:

使用 Playwright 的 test.describe() 组织相关测试
使用 test.beforeEach() 进行测试前置准备
确保每个测试独立运行，不依赖其他测试的状态

断言策略:

使用 Playwright 的 expect() API 进行断言
验证元素可见性：expect(locator).toBeVisible()
验证文本内容：expect(locator).toHaveText()
验证数量：expect(locator).toHaveCount()

状态徽章验证:

状态徽章可能使用特定的 CSS 类或 data 属性
验证徽章的文本内容和样式（如适用）
参考残疾人管理测试中的状态徽章验证模式

测试标准参考

遵循以下测试标准文档：

docs/standards/testing-standards.md - 测试规范
docs/standards/web-ui-testing-standards.md - Web UI 测试规范
docs/standards/e2e-radix-testing.md - Radix UI E2E 测试标准

选择器优先级:

data-testid - 最高优先级
aria-label + role
text content + role - 兜底

Project Structure Notes

文件位置:

测试文件: web/tests/e2e/specs/admin/order-list.spec.ts
Page Object: web/tests/e2e/pages/admin/order-management.page.ts
Fixtures 目录: web/tests/e2e/fixtures/

对齐统一项目结构:

遵循 project-context.md 中的 TypeScript 严格模式规则
函数参数、返回值必须有明确类型注解
禁止使用 any 类型
公共 API 必须包含完整 JSDoc 注释

测试运行命令

# 在 web 目录下运行单个测试文件
cd web
pnpm test:e2e:chromium order-list

# 快速失败模式（推荐调试时使用）
timeout 60 pnpm test:e2e:chromium order-list

测试注意事项

数据隔离:

测试应使用现有的订单数据进行验证
不需要在测试中创建新订单（创建测试由 Story 10.4 负责）
如果需要测试特定状态的订单，应假设数据库中存在测试数据

分页功能:

分页功能可能在 UI 上有不同实现方式
需要实际验证页面后再编写相应测试
如果没有分页功能，可以跳过相关测试

状态徽章样式:

徽章可能使用不同的颜色表示不同状态
验证时首先确保文本正确，样式验证为可选

调试技巧

E2E 测试失败调试:

查看 test-results/**/error-context.md
使用 timeout 命令限制运行时间
timeout 60 pnpm test:e2e:chromium order-list

截图和录制:

Playwright 默认在测试失败时截图
可以使用 --headed 参数查看浏览器执行过程
使用 --debug 参数进入调试模式

测试覆盖场景清单

基础功能验证:

页面标题显示
新增订单按钮可见
订单列表表格存在
搜索框和搜索按钮可见
筛选按钮可见（如有）

数据展示验证:

订单名称列显示
平台列显示
公司列显示
渠道列显示
预计开始日期列显示

订单状态徽章验证:

草稿状态徽章
已确认状态徽章
进行中状态徽章
已完成状态徽章

工作状态徽章验证:

未就业状态徽章
待就业状态徽章
已就业状态徽章
已离职状态徽章

分页功能验证:

分页控件存在
分页信息显示
页码切换功能（如有）

References

Dev Agent Record

Agent Model Used

claude-opus-4-5-20251101

Debug Log References

Completion Notes List

Page Object 选择器优化
- 修复了 pageTitle 选择器：使用 [data-slot="card-title"] 更精确地定位页面标题，避免与侧边栏按钮冲突
- 修复了 addOrderButton 选择器：使用 data-testid="create-order-button" 替代文本搜索，因为实际按钮文本是"创建订单"而非"新增订单"
- 修复了 searchInput 和 searchButton 选择器：使用 data-testid 属性定位
测试实现完成情况
- 创建了完整的订单列表查看测试套件，共 21 个测试用例
- 所有测试在真实浏览器环境中通过（Playwright Chromium）
- 测试覆盖了页面加载、数据展示、状态徽章、分页功能、数据交互、导航和操作按钮
测试结果摘要
- ✅ 21 个测试全部通过
- 验证了订单列表的基本功能：页面标题、创建订单按钮、表格、搜索框
- 验证了表格列：订单名称、平台、公司、渠道、预计开始日期、订单状态、工作状态
- 验证了订单状态徽章：草稿、已确认
- 验证了工作状态徽章：未就业
- 验证了分页功能：显示"共 X 条记录"信息
代码审查修复 (2026-01-11)
- HIGH: 修复占位符测试 - 分页验证现在有真正的断言而非 expect(true).toBe(true)
- HIGH: 修复订单状态徽章验证 - 现在使用真实的断言而非 console.debug
- HIGH: 修复工作状态徽章验证 - 现在使用真实的断言而非 console.debug
- MEDIUM: 移除 waitForTimeout 反模式，改用 waitForLoadState('networkidle')
- LOW: 清理所有 console.debug 调试语句
- LOW: 修复重复的测试用例（订单列表表格验证）
- MEDIUM: 修复操作按钮验证占位符测试，现在有真正的断言

File List

新增文件:

web/tests/e2e/specs/admin/order-list.spec.ts - 订单列表查看测试套件（21 个测试用例）

修改文件:

web/tests/e2e/utils/test-setup.ts - 添加 orderManagementPage fixture
web/tests/e2e/pages/admin/order-management.page.ts - 优化选择器定位策略

Change Log

2026-01-11: 完成 Story 10.2 - 订单列表查看测试实现
- 创建 21 个测试用例，全部通过
- 修复 Page Object 选择器定位问题
- 更新测试 fixtures 配置

10-2-order-list-tests.md 12 KB Историја Датотека