frontend-testing

name	frontend-testing
description	提供前端web测试的规范，包括测试策略、测试类型、测试工具和测试流程等。在进行前端web测试时调用。

前端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 测试示例

// 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('[e-mail]', 'password');
  
  // Assert
  expect(apiMock.login).toHaveBeenCalledWith('[e-mail]', '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('[e-mail]');
  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: '[e-mail]',
    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测试

// cypress/e2e/login.cy.js
describe('Login functionality', () => {
  it('should login successfully with valid credentials', () => {
    cy.visit('/login');
    
    cy.get('input[type="email"]').type('[e-mail]');
    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('[e-mail]');
    cy.get('input[type="password"]').type('wrongpassword');
    cy.get('button[type="submit"]').click();
    
    cy.contains('邮箱或密码错误').should('be.visible');
  });
});

Playwright跨浏览器测试

// 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"]', '[e-mail]');
  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
• 设备：桌面、平板、手机
• 配置：生产配置

6.2 环境管理

6.2.1 环境隔离

• 开发环境、测试环境、生产环境相互隔离
• 测试环境与生产环境配置相似

6.2.2 环境部署

• 使用Docker容器化部署测试环境
• 自动化部署测试环境

7. 测试最佳实践

1. 测试驱动开发：先写测试，再写代码
2. 自动化测试：自动化重复的测试任务
3. 持续集成：将测试集成到CI/CD流程
4. 测试覆盖：确保测试覆盖关键功能
5. 缺陷预防：通过测试发现并预防缺陷
6. 测试数据管理：合理管理测试数据
7. 测试环境管理：保持测试环境的一致性
8. 测试文档：维护测试文档
9. 团队协作：测试人员与开发人员紧密协作
10. 持续改进：不断优化测试流程和方法

8. 常见测试问题及解决方案

问题	原因	解决方案
测试用例执行慢	测试环境配置不当	优化测试环境，使用并行测试
测试覆盖不足	测试用例设计不全面	设计更全面的测试用例
测试数据管理困难	测试数据复杂	使用测试数据生成工具
缺陷重现困难	缺陷环境复杂	详细记录缺陷环境和步骤
测试与开发不同步	需求变更频繁	采用敏捷测试方法，快速适应变更
跨浏览器兼容性问题	浏览器差异	使用跨浏览器测试工具，如Playwright
响应式布局问题	屏幕尺寸差异	测试不同屏幕尺寸，使用断点测试

9. 总结

本前端Web测试规范提供了全面的测试指南，包括测试策略、测试类型、测试工具、测试流程、测试环境和测试最佳实践等方面。通过遵循本规范，测试人员可以系统地进行前端Web测试，确保家族树应用前端的质量和用户体验。

测试是一个持续改进的过程，需要不断地学习和适应新的测试方法和工具。测试人员应该保持学习，关注最新的测试技术和趋势，不断提高测试水平。