Feed页面E2E测试
🎯 当前状况
配置当前test文件夹
test/
├── README.md # 이 파일 - 전체 테스트 가이드
├── auth/ # 인증 관련 테스트
├── feed/ # 피드 핵심 기능 테스트
│ └── comment/ # 댓글 기능 세부 테스트
├── navigation/ # 페이지 네비게이션 테스트
└── util/ # 테스트 유틸리티 및 리소스
└── feed_image/ # 테스트용 이미지 파일들 (17개)完成传统前端分析
- SSR+CSR混合结构：初始加载为SSR，后续交互为CSR
- 乐观的用户界面：立即更新UI并同步服务器
- 缓存无效：Server Action 5秒冷却机制
- 状态管理基于状态 PostStore， UserStore
📋 测试进度计划
步骤1：构建基本环境（首先）
# Playwright 설치 및 설정
npm init playwright@latest
cd test && npx playwright install
# 기본 설정 파일
playwright.config.ts第2步：实施核心功能测试
test/
├── playwright.config.ts # Playwright 설정
├── auth.spec.ts # 로그인/로그아웃 기본 기능
├── feed-navigation.spec.ts # 페이지 이동 및 기본 UI
├── feed-crud.spec.ts # 게시글 CRUD 핵심 기능
└── utils/
├── auth-helper.ts # 로그인 헬퍼
└── feed-helper.ts # 피드 상호작용 헬퍼步骤3:添加高级功能测试
test/
├── feed-interactions.spec.ts # 좋아요/댓글 기능
├── image-upload.spec.ts # 이미지 업로드 (1-5개)
├── modal-behaviors.spec.ts # 게시글 상세 모달
└── performance.spec.ts # SSR+CSR, 캐시 무효화🧪 测试方法
实际用户观点
// ❌ 개발자 관점
await page.locator('[data-testid="create-post"]').click();
// ✅ 사용자 관점
await page.locator('button:has-text("새 게시물"), .create-post, [title*="작성"]').click();基于传统代码
- 使用当前实施的实际选择器和行为方式
- 测试实际的实施，而不是理想的实施
- 稳定的选择器，无需data-testid即可工作
逐步实施
- 最有价值球员：登录→撰写帖子→查询基本流程
- 扩展：上传图片，点赞，评论功能
- 高度化：性能、可访问性、错误处理
🎯 核心测试方案
P0（最优先）
- 登录流: test@test.test / test123!使用@#帐户
- 创建帖子：上载文本+图像
- 查看帖子：验证在种子中创建的帖子
- 默认导航：/feed，/feed/create移动
P1（重要）
- 好功能：单击时立即反映并同步服务器
- 评论功能：创建和查看评论
- 修改/删除帖子：编辑您的帖子
- 模式交互：查看详情，ESC键，单击背景
P2（补充）
- 无限滚动：触发200px阈值
- 响应式设计：移动/平板电脑/台式机
- 错误处理：网络失败，认证过期
- 接近性：键盘导航
🔧 技术堆栈和设置
选择工具
- 框架：Playwright（跨浏览器，可靠性）
- 语言：TypeScript（类型稳定性）
- 目标: https://hello-pet.my（实际部署环境）
- 执行：连续运行（可靠性优先）
测试帐户
- 主要的，重要的: test@test.test/test123！@#
- 备份：必要时创建其他帐户
设置方向
// playwright.config.ts 기본 방향
{
testDir: './test',
fullyParallel: false, // 순차 실행
workers: 1, // 안정성 확보
retries: 2, // CI 환경에서만
use: {
baseURL: 'https://hello-pet.my',
trace: 'on-first-retry',
screenshot: 'only-on-failure'
}
}🚀 如何执行（计划）
开发环境
# 브라우저 화면 보면서 실행
cd test && npx playwright test --headed
# 특정 테스트만 실행
cd test && npx playwright test auth.spec.ts
# 디버그 모드 (단계별 실행)
cd test && npx playwright test --debugCI环境
# 헤드리스 모드로 전체 실행
cd test && npx playwright test
# 리포트 생성
cd test && npx playwright show-report📊 成功标准
功能目标
- 核心流程：登录→创建→查询→互动100%成功
- 可靠性：Flaky test 0%（稳定，无需重新运行）
- 覆盖率：覆盖95%的主要用户场景
非功能性目标
- 运行时间：完整测试\<5分钟
- 可维护性：尽量减少代码更改时的测试修改
- 可读性：测试方案清晰易懂
🔄 下一个动作道具
立即运行
- Playwright初始设置:
npm init playwright@latest - 创建默认测试文件：认证规范、馈电导航规范
- 实现帮助函数：登录，页面移动实用程序
一周内
- 核心CRUD测试：创建/查看/修改/删除帖子
- 测试图像上传：1到5个图像处理
- 基本交互：好的，评论功能
一个月内
- 性能测试：SSR+CSR混合，缓存无效
- 接近性测试：键盘，屏幕阅读器
- 错误处理：网络失败，权限错误
💡 核心哲学
实用性优先
- 比起完美的测试 运行稳定的测试
- 比起理论的完成度 发现实际问题的能力
- 比起复杂的结构 易于理解的简单性
以用户为中心
- 不是以开发者方便的方式。 实际用户使用的方式
- 比起技术实现 验证业务价值
- 比起单元测试 整合方案
逐步发展
- 比起一次做得完美 从小处开始，稳定地
- 不要抛弃现有的。 改进和扩展
- 比起理论。 通过实际经验学习
______________________________________________________________________
当前目标：完成Playwright设置后实现默认登录→撰写帖子→查询流程测试