frontend-testing

# 前端Web测试规范 ## 1. 技能概述 本技能提供了家族树应用前端Web测试的规范，包括测试策略、测试类型、测试工具、测试流程等方面。通过本规范，测试人员可以系统地进行前端Web测试，确保前端应用的质量和用户体验。 ## 2. 测试策略 ### 2.1 测试目标 - **功能测试**：验证前端功能是否正常工作 - **性能测试**：验证前端页面加载和交互性能 - **兼容性测试**：验证前端在不同浏览器和设备上的兼容性 - **用户体验测试**：验证用户体验是否良好 - **响应式测试**：验证前端在不同屏幕尺寸下的显示效果 ### 2.2 测试方法 - **单元测试**：测试单个组件或函数 - **集成测试**：测试组件之间的交互 - **系统测试**：测试整个前端系统的功能 - **端到端测试**：测试完整的用户流程 - **回归测试**：测试现有功能是否被破坏 - **验收测试**：验证前端是否满足业务需求 ### 2.3 测试覆盖范围 - **功能覆盖**：覆盖所有前端功能点 - **代码覆盖**：覆盖关键代码路径 - **场景覆盖**：覆盖常见用户场景 - **边界覆盖**：覆盖边界情况 - **异常覆盖**：覆盖异常情况 - **响应式覆盖**：覆盖不同屏幕尺寸 ## 3. 测试类型 ### 3.1 单元测试 #### 3.1.1 测试对象 - **组件**：测试Vue组件的渲染和交互 - **工具函数**：测试通用工具函数 - **状态管理**：测试Pinia store的状态管理 - **路由**：测试路由配置和导航 #### 3.1.2 测试工具 - **Jest**：JavaScript单元测试框架 - **Vue Test Utils**：Vue组件测试库 - **React Testing Library**：React组件测试库（如果使用React） #### 3.1.3 测试示例 ```javascript // UserStore.test.js test('login action', async () => { // Arrange const store = createPinia().use(userStore); const apiMock = jest.mocked(api); apiMock.login.mockResolvedValue({ token: 'test-token' }); // Act await store.login('test@example.com', 'password'); // Assert expect(apiMock.login).toHaveBeenCalledWith('test@example.com', 'password'); expect(store.token).toBe('test-token'); expect(store.isAuthenticated).toBe(true); }); // LoginForm.test.js import { mount } from '@vue/test-utils'; import LoginForm from '@/components/LoginForm.vue'; test('renders login form', () => { const wrapper = mount(LoginForm); expect(wrapper.find('h2').text()).toBe('登录'); expect(wrapper.find('input[type="email"]').exists()).toBe(true); expect(wrapper.find('input[type="password"]').exists()).toBe(true); expect(wrapper.find('button[type="submit"]').exists()).toBe(true); }); test('emits login event with correct data', async () => { const wrapper = mount(LoginForm); await wrapper.find('input[type="email"]').setValue('test@example.com'); await wrapper.find('input[type="password"]').setValue('password123'); await wrapper.find('button[type="submit"]').trigger('click'); expect(wrapper.emitted('login')).toHaveLength(1); expect(wrapper.emitted('login')[0]).toEqual([{ email: 'test@example.com', password: 'password123' }]); }); ``` ### 3.2 集成测试 #### 3.2.1 测试对象 - **组件集成**：测试组件之间的交互 - **API集成**：测试前端与后端API的交互 - **路由集成**：测试路由导航和页面跳转 #### 3.2.2 测试工具 - **Cypress**：现代前端E2E测试框架 - **Playwright**：跨浏览器测试框架 - **Vue Test Utils**：Vue组件集成测试 #### 3.2.3 测试策略 - **Mock测试**：使用Mock数据测试前端逻辑 - **真实API测试**：测试与真实后端API的交互 - **错误处理测试**：测试API错误时的处理逻辑 ### 3.3 端到端测试 #### 3.3.1 测试对象 - **用户流程**：测试完整的用户流程 - **业务场景**：测试实际业务场景 - **页面交互**：测试页面之间的交互 #### 3.3.2 测试工具 - **Cypress**：现代前端E2E测试框架 - **Playwright**：跨浏览器测试框架 - **Selenium**：成熟的Web测试框架 #### 3.3.3 测试示例 **Cypress E2E测试** ```javascript // cypress/e2e/login.cy.js describe('Login functionality', () => { it('should login successfully with valid credentials', () => { cy.visit('/login'); cy.get('input[type="email"]').type('admin@example.com'); cy.get('input[type="password"]').type('password'); cy.get('button[type="submit"]').click(); cy.url().should('include', '/dashboard'); cy.contains('欢迎回来').should('be.visible'); }); it('should show error message with invalid credentials', () => { cy.visit('/login'); cy.get('input[type="email"]').type('invalid@example.com'); cy.get('input[type="password"]').type('wrongpassword'); cy.get('button[type="submit"]').click(); cy.contains('邮箱或密码错误').should('be.visible'); }); }); ``` **Playwright跨浏览器测试** ```javascript // tests/login.spec.js const { test, expect } = require('@playwright/test'); test('login test across browsers', async ({ page, browserName }) => { await page.goto('/login'); await page.fill('input[type="email"]', 'admin@example.com'); await page.fill('input[type="password"]', 'password'); await page.click('button[type="submit"]'); await expect(page).toHaveURL('/dashboard'); await expect(page.locator('text=欢迎回来')).toBeVisible(); console.log(`Test passed in ${browserName}`); }); ``` ### 3.4 响应式测试 #### 3.4.1 测试对象 - **不同屏幕尺寸**：测试在不同屏幕尺寸下的显示效果 - **设备兼容性**：测试在不同设备上的显示效果 - **布局适配**：测试布局在不同尺寸下的适配情况 #### 3.4.2 测试工具 - **Cypress**：支持响应式测试 - **Playwright**：支持不同设备模拟 - **BrowserStack**：跨设备测试平台 #### 3.4.3 测试方法 - **断点测试**：测试不同断点下的布局 - **设备模拟**：模拟不同设备的显示效果 - **实际设备测试**：在实际设备上进行测试 ### 3.5 性能测试 #### 3.5.1 测试对象 - **页面加载性能**：测试页面加载时间 - **交互性能**：测试用户交互响应时间 - **资源使用**：测试浏览器资源使用情况 #### 3.5.2 测试工具 - **Lighthouse**：性能和可访问性测试 - **WebPageTest**：网页性能测试 - **Chrome DevTools**：浏览器开发工具 #### 3.5.3 测试指标 - **首屏加载时间**：用户看到页面内容的时间 - **可交互时间**：用户可以与页面交互的时间 - **总加载时间**：页面完全加载的时间 - **资源大小**：页面资源的大小 - **网络请求**：网络请求的数量和大小 ### 3.6 可访问性测试 #### 3.6.1 测试对象 - **键盘导航**：测试键盘导航的可用性 - **屏幕阅读器**：测试屏幕阅读器的兼容性 - **颜色对比度**：测试颜色对比度是否符合标准 - **ARIA属性**：测试ARIA属性的正确使用 #### 3.6.2 测试工具 - **Lighthouse**：可访问性测试 - **Axe**：可访问性测试库 - **WAVE**：网页可访问性评估工具 ## 4. 测试流程 ### 4.1 测试计划 #### 4.1.1 计划内容 - **测试范围**：明确测试范围 - **测试目标**：设定测试目标 - **测试资源**：分配测试资源 - **测试时间**：安排测试时间 - **测试风险**：识别测试风险 #### 4.1.2 计划示例 ``` # 家族树应用前端测试计划 ## 测试范围 - 核心功能：用户认证、家族管理、成员管理、关系管理 - 增强功能：事件管理、媒体管理 - 高级功能：AI功能 ## 测试目标 - 功能测试：所有前端功能正常工作 - 性能测试：页面加载时间<3秒 - 兼容性测试：支持主流浏览器 - 响应式测试：适配不同屏幕尺寸 ## 测试资源 - 测试人员：2人 - 测试环境：1台测试服务器 - 测试工具：Jest、Cypress、Lighthouse ## 测试时间 - 单元测试：2天 - 集成测试：3天 - 端到端测试：2天 - 性能测试：1天 - 可访问性测试：1天 ``` ### 4.2 测试执行 #### 4.2.1 执行步骤 1. **环境准备**：准备测试环境 2. **测试数据准备**：准备测试数据 3. **测试执行**：执行测试用例 4. **缺陷记录**：记录测试过程中发现的缺陷 5. **测试报告**：生成测试报告 #### 4.2.2 测试执行规范 - **测试用例执行**：按照测试用例执行测试 - **缺陷记录**：详细记录缺陷的步骤、环境和预期结果 - **测试日志**：记录测试过程中的日志 - **测试覆盖**：确保测试覆盖所有功能点 ### 4.3 缺陷管理 #### 4.3.1 缺陷分类 - **严重级**：系统崩溃、功能完全不可用 - **高级**：功能部分不可用、性能问题 - **中级**：UI问题、交互问题 - **低级**：轻微问题、建议改进 #### 4.3.2 缺陷处理流程 1. **缺陷发现**：测试人员发现缺陷 2. **缺陷记录**：在缺陷管理系统中记录缺陷 3. **缺陷分配**：将缺陷分配给开发人员 4. **缺陷修复**：开发人员修复缺陷 5. **缺陷验证**：测试人员验证缺陷是否修复 6. **缺陷关闭**：确认缺陷修复后关闭缺陷 #### 4.3.3 缺陷管理工具 - **Jira**：缺陷跟踪工具 - **Bugzilla**：缺陷跟踪工具 - **Mantis**：缺陷跟踪工具 - **GitHub Issues**：代码托管平台的缺陷跟踪 ### 4.4 测试报告 #### 4.4.1 报告内容 - **测试摘要**：测试概览和结果 - **测试覆盖**：测试覆盖情况 - **缺陷统计**：缺陷数量和分布 - **测试环境**：测试环境信息 - **测试结论**：测试结论和建议 #### 4.4.2 报告示例 ``` # 家族树应用前端测试报告 ## 测试摘要 - 测试时间：2024-01-01至2024-01-07 - 测试范围：核心功能和增强功能 - 测试用例：100个 - 执行测试：100个 - 通过测试：95个 - 失败测试：5个 - 通过率：95% ## 缺陷统计 - 严重级：0个 - 高级：1个 - 中级：3个 - 低级：1个 ## 测试结论 - 核心功能运行正常 - 发现5个缺陷，其中1个高级缺陷需要优先修复 - 建议在修复缺陷后进行回归测试 ``` ## 5. 测试工具 ### 5.1 核心测试工具 | 工具 | 用途 | 特点 | |------|------|------| | **Jest** | 单元测试 | 快速、功能丰富 | | **Vue Test Utils** | Vue组件测试 | 专门为Vue设计 | | **Cypress** | 端到端测试 | 现代前端测试框架 | | **Playwright** | 端到端测试 | 跨浏览器测试 | | **Lighthouse** | 性能和可访问性测试 | Google开源工具 | | **ESLint** | 代码质量检查 | 静态代码分析 | | **Prettier** | 代码格式化 | 保持代码风格一致 | ### 5.2 测试管理工具 | 工具 | 用途 | 特点 | |------|------|------| | **Jira** | 测试管理 | 敏捷项目管理 | | **TestRail** | 测试管理 | 专业测试管理工具 | | **Zephyr** | 测试管理 | 与Jira集成 | | **GitHub Actions** | CI/CD | 自动化测试 | | **GitLab CI** | CI/CD | 自动化测试 | ## 6. 测试环境 ### 6.1 环境配置 #### 6.1.1 开发环境 - **浏览器**：Chrome、Firefox、Safari - **设备**：桌面、平板、手机 - **配置**：开发配置 #### 6.1.2 测试环境 - **浏览器**：Chrome、Firefox、Safari、Edge - **设备**：桌面、平板、手机 - **配置**：测试配置 #### 6.1.3 生产环境 - **浏览器**：Chrome、Firefox、Safari、Edge - **设备**：桌面、平板、手机