# Uniapp E2E测试使用指南 ## 概述 本E2E测试工具为everything-is-suitable-uniapp小程序提供全面的端到端测试解决方案，基于Playwright构建，支持多浏览器、多平台测试，并提供详细的测试报告。 ## 目录结构 ``` e2e/uniapp/ ├── pages/ # 页面对象模型 │ ├── base-page.ts # 基础页面类 │ ├── calendar-page.ts # 万年历页面 │ ├── almanac-page.ts # 黄历页面 │ ├── user-page.ts # 用户中心页面 │ └── bottom-navigation.ts # 底部导航栏 ├── navigation.spec.ts # 页面导航测试 ├── calendar.spec.ts # 万年历页面测试 ├── almanac.spec.ts # 黄历页面测试 ├── user.spec.ts # 用户中心页面测试 ├── data-loading.spec.ts # 数据加载测试 ├── state-update.spec.ts # 状态更新测试 ├── boundary.spec.ts # 边界条件测试 ├── test-reporter.ts # 测试报告生成器 ├── global-setup.ts # 全局测试设置 └── global-teardown.ts # 全局测试清理 ``` ## 快速开始 ### 1. 安装依赖 ```bash cd everything-is-suitable-test npm install ``` ### 2. 启动Uniapp应用 在另一个终端中启动Uniapp应用： ```bash cd ../everything-is-suitable-uniapp npm run dev:h5 ``` ### 3. 运行测试 ```bash # 运行所有Uniapp E2E测试 npm run test:e2e:uniapp # 运行特定测试文件 npx playwright test --config=playwright.uniapp.config.ts e2e/uniapp/navigation.spec.ts # 运行特定测试用例 npx playwright test --config=playwright.uniapp.config.ts -g "底部导航栏切换测试" # 调试模式运行 npm run test:e2e:uniapp:debug # UI模式运行 npm run test:e2e:uniapp:ui # 有头模式运行（显示浏览器） npm run test:e2e:uniapp:headed ``` ### 4. 查看测试报告 ```bash # 查看Playwright HTML报告 npm run test:e2e:uniapp:report ``` ## 测试用例 ### 页面导航测试 (navigation.spec.ts) - **TC-001**: 底部导航栏切换测试 - **TC-002**: 页面标题显示测试 ### 万年历页面测试 (calendar.spec.ts) - **TC-003**: 日历月份切换测试 - **TC-004**: 日期选择测试 - **TC-005**: 农历信息显示测试 ### 黄历页面测试 (almanac.spec.ts) - **TC-006**: 黄历日期切换测试 - **TC-007**: 黄历信息显示测试 ### 用户中心页面测试 (user.spec.ts) - **TC-008**: 用户信息显示测试 - **TC-009**: 菜单导航测试 ### 数据加载测试 (data-loading.spec.ts) - **TC-012**: 黄历数据加载测试 - **TC-013**: 日历数据加载测试 ### 状态更新测试 (state-update.spec.ts) - **TC-014**: 选中日期状态更新测试 - **TC-015**: 导航栏状态更新测试 ### 边界条件测试 (boundary.spec.ts) - **TC-016**: 月份边界测试 - **TC-017**: 日期边界测试 - **TC-018**: 表单验证测试 ## 页面对象模型 ### BasePage 所有页面对象的基类，提供通用的页面操作方法： ```typescript import { BasePage } from './pages/base-page'; const page = new BasePage(page); await page.navigate('/pages/calendar/index'); await page.waitForLoad(); await page.clickElement('.button'); await page.fillInput('.input', 'value'); ``` ### CalendarPage 万年历页面对象： ```typescript import { CalendarPage } from './pages/calendar-page'; const calendarPage = new CalendarPage(page); await calendarPage.navigate(); await calendarPage.clickNextMonth(); await calendarPage.clickDay(15); const lunarDate = await calendarPage.getLunarDate(); ``` ### AlmanacPage 黄历页面对象： ```typescript import { AlmanacPage } from './pages/almanac-page'; const almanacPage = new AlmanacPage(page); await almanacPage.navigate(); await almanacPage.clickNextDate(); const almanacInfo = await almanacPage.getAllAlmanacInfo(); ``` ### UserPage 用户中心页面对象： ```typescript import { UserPage } from './pages/user-page'; const userPage = new UserPage(page); await userPage.navigate(); const userName = await userPage.getUserName(); await userPage.clickMenuItem(0); ``` ### BottomNavigation 底部导航栏对象： ```typescript import { BottomNavigation } from './pages/bottom-navigation'; const bottomNavigation = new BottomNavigation(page); await bottomNavigation.clickTab('almanac'); const isActive = await bottomNavigation.isTabActive('almanac'); ``` ## 测试报告 ### Playwright报告 Playwright自动生成HTML报告，包含： - 测试执行摘要 - 每个测试的详细信息 - 失败测试的截图和视频 - 性能指标 ### 自定义报告 使用`test-reporter.ts`生成自定义报告： ```typescript import { UniappTestReporter } from './test-reporter'; const reporter = new UniappTestReporter(); reporter.addTestSuite('测试套件名称', [ { testName: '测试用例名称', status: 'passed', duration: 1000, } ]); await reporter.generateJSONReport('test-results/uniapp-report.json'); await reporter.generateHTMLReport('test-results/uniapp-report.html'); await reporter.generateMarkdownReport('test-results/uniapp-report.md'); ``` ## 配置 ### Playwright配置 配置文件：`playwright.uniapp.config.ts` 主要配置项： - `testDir`: 测试文件目录 - `baseURL`: 应用基础URL - `projects`: 浏览器项目配置 - `webServer`: 开发服务器配置 ### 环境变量 - `BASE_URL`: 应用基础URL - `CI`: 是否在CI环境中运行 - `NODE_ENV`: Node环境 ## 最佳实践 ### 1. 测试用例编写 - 使用描述性的测试名称 - 遵循AAA模式（Arrange-Act-Assert） - 使用页面对象而不是直接操作元素 - 添加适当的等待和断言 ```typescript test('应该能够切换到黄历页面', async ({ page }) => { await calendarPage.navigate(); await bottomNavigation.clickTab('almanac'); const title = await page.title(); expect(title).toContain('黄历'); }); ``` ### 2. 页面对象使用 - 将选择器封装在页面对象中 - 实现业务逻辑方法 - 保持页面对象的独立性 ```typescript export class CalendarPage extends BasePage { private readonly selectors = { prevMonthButton: '[data-testid="prev-month"]', nextMonthButton: '[data-testid="next-month"]', }; async clickNextMonth() { await this.clickElement(this.selectors.nextMonthButton); await this.waitForLoad(); } } ``` ### 3. 测试数据管理 - 使用测试数据生成器 - 避免硬编码测试数据 - 使用测试夹具提供的预定义数据 ### 4. 错误处理 - 在测试用例中使用try-catch捕获错误 - 使用测试日志记录错误信息 - 在测试失败时截图 ```typescript test('测试用例', async ({ page }) => { try { await page.goto('/pages/calendar/index'); expect(await page.title()).toContain('万年历'); } catch (error) { await page.screenshot({ path: 'test-failure.png' }); throw error; } }); ``` ### 5. 等待策略 - 使用页面对象提供的等待方法 - 避免使用固定的等待时间 - 使用Playwright的自动等待机制 ```typescript await page.waitForLoadState('networkidle'); await page.waitForSelector('.element', { state: 'visible' }); ``` ## 故障排查 ### 测试失败时的调试 1. 查看测试日志：控制台输出 2. 查看截图：`test-results/uniapp-artifacts/` 3. 查看测试报告：`npm run test:e2e:uniapp:report` 4. 使用调试模式运行：`npm run test:e2e:uniapp:debug` ### 常见问题 1. **元素未找到** - 检查选择器是否正确 - 确保元素已加载 - 使用适当的等待策略 2. **测试超时** - 增加超时配置 - 检查网络请求是否正常 - 优化测试等待策略 3. **应用未启动** - 确保Uniapp应用已启动 - 检查端口是否正确 - 查看应用日志 ## CI/CD集成 ### GitHub Actions示例 ```yaml name: Uniapp E2E Tests on: push: branches: [ main, develop ] pull_request: branches: [ main, develop ] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '18' - run: npm ci - run: npm run test:e2e:uniapp - uses: actions/upload-artifact@v3 if: failure() with: name: test-results path: test-results/ ``` ## 扩展开发 ### 添加新的页面对象 1. 在`pages/`目录下创建新的页面类 2. 继承`BasePage`类 3. 实现页面特定的方法和选择器 ```typescript import { BasePage } from './base-page'; export class NewPage extends BasePage { private readonly selectors = { // 页面选择器 }; async navigate() { await this.navigate('/pages/new/index'); } async doSomething() { // 页面方法 } } ``` ### 添加新的测试用例 1. 在`e2e/uniapp/`目录下创建新的测试文件 2. 使用`test.describe`组织测试用例 3. 使用页面对象进行测试 ```typescript import { test, expect } from '@playwright/test'; import { NewPage } from './pages/new-page'; test.describe('新功能测试', () => { test('应该能够执行新功能', async ({ page }) => { const newPage = new NewPage(page); await newPage.navigate(); await newPage.doSomething(); expect(await page.title()).toContain('新页面'); }); }); ``` ## 性能优化 ### 并行执行 Playwright默认支持并行执行测试，可以通过配置文件调整： ```typescript export default defineConfig({ workers: 4, fullyParallel: true, }); ``` ### 测试隔离 确保每个测试用例都是独立的，避免测试之间的依赖： ```typescript test.beforeEach(async ({ page }) => { await page.goto('/'); }); test.afterEach(async ({ page }) => { await page.close(); }); ``` ### 重试机制 配置测试失败时的重试次数： ```typescript export default defineConfig({ retries: 2, }); ``` ## 总结 本E2E测试工具提供了完整的Uniapp应用端到端测试解决方案，包括： - ✅ 模块化的测试用例编写 - ✅ 统一的测试环境配置 - ✅ 常用测试操作的封装与复用 - ✅ 清晰的测试报告与日志输出 - ✅ 页面对象模型（POM） - ✅ 多浏览器支持 - ✅ 跨平台兼容性测试 - ✅ 自动化测试执行流程 - ✅ 详细的测试报告生成 通过使用本工具，可以高效地编写、执行和维护E2E测试，确保应用的质量和稳定性。