/** * 家长端 E2E 测试 - 阅读任务模块 * * 测试范围: * 1. 任务列表查看 * 2. 任务提交功能(照片/视频/音频/文字) * 3. 查看教师评价功能 */ import { test, expect } from '@playwright/test'; const BASE_URL = 'http://localhost:5173'; test.describe('家长端阅读任务 - 任务列表', () => { test.beforeEach(async ({ page }) => { // 登录 await page.goto(`${BASE_URL}/login`); await page.waitForLoadState('networkidle'); // 选择家长角色 await page.click('.role-btn:has-text("家长")'); await page.waitForTimeout(300); // 填写账号密码 await page.fill('input[placeholder*="账号"]', 'parent1'); await page.fill('input[placeholder*="密码"]', '123456'); // 点击登录 await page.click('button.login-btn'); await page.waitForURL(/\/parent/, { timeout: 15000 }); }); test('P-LIST-01: 任务列表加载', async ({ page }) => { // 导航到任务页面 await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 验证页面标题 const pageTitle = page.locator('h2, .ant-page-header-heading-title'); await expect(pageTitle.first()).toBeVisible({ timeout: 5000 }); await page.screenshot({ path: 'test-results/parent-task-list.png', fullPage: true }); console.log('✅ P-LIST-01 通过: 家长端任务列表页面加载'); }); test('P-LIST-02: 状态标签显示验证', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找状态标签 const statusTags = page.locator('.ant-tag'); const count = await statusTags.count(); if (count > 0) { // 验证状态标签文本 const validStatuses = ['待提交', '已提交', '已评价', '待完成', '已完成', 'PENDING', 'SUBMITTED', 'REVIEWED']; let hasValidStatus = false; for (let i = 0; i < Math.min(count, 10); i++) { const text = await statusTags.nth(i).textContent(); if (text && validStatuses.some(s => text.includes(s))) { hasValidStatus = true; break; } } if (hasValidStatus) { console.log('✅ P-LIST-02 通过: 状态标签显示正确'); } else { console.log(`⚠️ P-LIST-02: 状态标签存在但内容不匹配: ${await statusTags.first().textContent()}`); } } else { console.log('⚠️ P-LIST-02: 暂无任务数据,无法验证状态标签'); } }); test('P-LIST-03: 关联绘本显示验证', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找关联绘本标签 const bookTag = page.locator('.ant-tag:has-text("绘本"), [class*="book-name"]'); const count = await bookTag.count(); if (count > 0) { const firstBook = await bookTag.first().textContent(); console.log(`✅ P-LIST-03 通过: 关联绘本显示 (${firstBook})`); } else { console.log('⚠️ P-LIST-03: 未找到关联绘本标签'); } }); test('P-LIST-04: 状态驱动按钮验证', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找操作按钮 const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")'); const viewFeedbackBtn = page.locator('button:has-text("查看评价"), button:has-text("查看反馈")'); const submitCount = await submitBtn.count(); const feedbackCount = await viewFeedbackBtn.count(); console.log(`提交按钮数: ${submitCount}, 查看评价按钮数: ${feedbackCount}`); if (submitCount > 0 || feedbackCount > 0) { console.log('✅ P-LIST-04 通过: 状态驱动按钮正常显示'); } else { console.log('⚠️ P-LIST-04: 未找到操作按钮(可能暂无任务数据)'); } }); }); test.describe('家长端阅读任务 - 提交功能', () => { test.beforeEach(async ({ page }) => { await page.goto(`${BASE_URL}/login`); await page.waitForLoadState('networkidle'); await page.click('.role-btn:has-text("家长")'); await page.fill('input[placeholder*="账号"]', 'parent1'); await page.fill('input[placeholder*="密码"]', '123456'); await page.click('button.login-btn'); await page.waitForURL(/\/parent/, { timeout: 15000 }); }); test('P-SUBMIT-01: 提交弹窗打开', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找提交按钮 const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first(); if (await submitBtn.isVisible()) { await submitBtn.click(); await page.waitForTimeout(1000); // 验证弹窗显示 const modal = page.locator('.ant-modal'); if (await modal.isVisible()) { console.log('✅ P-SUBMIT-01 通过: 提交弹窗正常打开'); await page.screenshot({ path: 'test-results/parent-submit-modal.png' }); } else { console.log('❌ P-SUBMIT-01 失败: 提交弹窗未显示'); } } else { console.log('⚠️ P-SUBMIT-01: 暂无待提交任务'); } }); test('P-SUBMIT-02: 照片上传组件', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找提交按钮 const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first(); if (await submitBtn.isVisible()) { await submitBtn.click(); await page.waitForTimeout(1000); // 查找上传组件 const uploadArea = page.locator('.ant-upload, input[type="file"]'); const uploadCount = await uploadArea.count(); if (uploadCount > 0) { console.log('✅ P-SUBMIT-02 通过: 照片上传组件存在'); } else { console.log('❌ P-SUBMIT-02 失败: 未找到上传组件'); } } else { console.log('⚠️ P-SUBMIT-02: 暂无待提交任务'); } }); test('P-SUBMIT-03: 视频链接输入', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first(); if (await submitBtn.isVisible()) { await submitBtn.click(); await page.waitForTimeout(1000); // 查找视频链接输入框 const videoInput = page.locator('input[placeholder*="视频"], input[placeholder*="video"]'); if (await videoInput.count() > 0) { console.log('✅ P-SUBMIT-03 通过: 视频链接输入框存在'); } else { console.log('⚠️ P-SUBMIT-03: 未找到视频链接输入框'); } } else { console.log('⚠️ P-SUBMIT-03: 暂无待提交任务'); } }); test('P-SUBMIT-04: 阅读心得输入框', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); const submitBtn = page.locator('button:has-text("提交"), button:has-text("去完成")').first(); if (await submitBtn.isVisible()) { await submitBtn.click(); await page.waitForTimeout(1000); // 查找心得输入框 const contentTextarea = page.locator('textarea[placeholder*="心得"], textarea[placeholder*="内容"]'); if (await contentTextarea.count() > 0) { console.log('✅ P-SUBMIT-04 通过: 阅读心得输入框存在'); } else { console.log('⚠️ P-SUBMIT-04: 未找到心得输入框'); } } else { console.log('⚠️ P-SUBMIT-04: 暂无待提交任务'); } }); }); test.describe('家长端阅读任务 - 查看评价', () => { test.beforeEach(async ({ page }) => { await page.goto(`${BASE_URL}/login`); await page.waitForLoadState('networkidle'); await page.click('.role-btn:has-text("家长")'); await page.fill('input[placeholder*="账号"]', 'parent1'); await page.fill('input[placeholder*="密码"]', '123456'); await page.click('button.login-btn'); await page.waitForURL(/\/parent/, { timeout: 15000 }); }); test('P-FEEDBACK-01: 查看评价按钮', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找查看评价按钮 const viewFeedbackBtn = page.locator('button:has-text("查看评价"), button:has-text("查看反馈"), button:has-text("评价详情")'); const count = await viewFeedbackBtn.count(); if (count > 0) { console.log('✅ P-FEEDBACK-01 通过: 查看评价按钮存在'); // 点击查看评价 await viewFeedbackBtn.first().click(); await page.waitForTimeout(1000); // 验证评价详情弹窗 const modal = page.locator('.ant-modal'); if (await modal.isVisible()) { console.log('✅ P-FEEDBACK-02 通过: 评价详情弹窗显示'); await page.screenshot({ path: 'test-results/parent-feedback-detail.png' }); } } else { console.log('⚠️ P-FEEDBACK-01: 暂无已评价任务'); } }); test('P-FEEDBACK-03: 评价结果显示验证', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找已评价任务的标签 const excellentTag = page.locator('.ant-tag:has-text("优秀"), .ant-tag:has-text("EXCELLENT")'); const passedTag = page.locator('.ant-tag:has-text("通过"), .ant-tag:has-text("PASSED")'); const needsWorkTag = page.locator('.ant-tag:has-text("需改进"), .ant-tag:has-text("NEEDS_WORK")'); const excellentCount = await excellentTag.count(); const passedCount = await passedTag.count(); const needsWorkCount = await needsWorkTag.count(); if (excellentCount + passedCount + needsWorkCount > 0) { console.log(`✅ P-FEEDBACK-03 通过: 评价结果显示 (优秀:${excellentCount}, 通过:${passedCount}, 需改进:${needsWorkCount})`); } else { console.log('⚠️ P-FEEDBACK-03: 暂无已评价任务'); } }); test('P-FEEDBACK-04: 评分星星显示', async ({ page }) => { await page.goto(`${BASE_URL}/parent/tasks`); await page.waitForLoadState('networkidle'); await page.waitForTimeout(2000); // 查找评分星星组件 const rateComponent = page.locator('.ant-rate, [class*="star"]'); const count = await rateComponent.count(); if (count > 0) { console.log('✅ P-FEEDBACK-04 通过: 评分星星组件存在'); } else { console.log('⚠️ P-FEEDBACK-04: 未找到评分星星组件'); } }); });