Menu
提供前端web测试的规范，包括测试策略、测试类型、测试工具和测试流程等。在进行前端web测试时调用。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
基于OpenAPI规范生成API文档，支持Swagger UI和ReDoc展示
提供后端单元测试指导和生成能力，支持JUnit 5、Mockito等框架
| name | frontend-testing |
| description | 提供前端web测试的规范，包括测试策略、测试类型、测试工具和测试流程等。在进行前端web测试时调用。 |
本技能提供了家族树应用前端Web测试的规范，包括测试策略、测试类型、测试工具、测试流程等方面。通过本规范，测试人员可以系统地进行前端Web测试，确保前端应用的质量和用户体验。
// 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'
}]);
});
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('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跨浏览器测试
// 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}`);
});
# 家族树应用前端测试计划
## 测试范围
- 核心功能：用户认证、家族管理、成员管理、关系管理
- 增强功能：事件管理、媒体管理
- 高级功能：AI功能
## 测试目标
- 功能测试：所有前端功能正常工作
- 性能测试：页面加载时间<3秒
- 兼容性测试：支持主流浏览器
- 响应式测试：适配不同屏幕尺寸
## 测试资源
- 测试人员：2人
- 测试环境：1台测试服务器
- 测试工具：Jest、Cypress、Lighthouse
## 测试时间
- 单元测试：2天
- 集成测试：3天
- 端到端测试：2天
- 性能测试：1天
- 可访问性测试：1天
# 家族树应用前端测试报告
## 测试摘要
- 测试时间：2024-01-01至2024-01-07
- 测试范围：核心功能和增强功能
- 测试用例：100个
- 执行测试：100个
- 通过测试：95个
- 失败测试：5个
- 通过率：95%
## 缺陷统计
- 严重级：0个
- 高级：1个
- 中级：3个
- 低级：1个
## 测试结论
- 核心功能运行正常
- 发现5个缺陷，其中1个高级缺陷需要优先修复
- 建议在修复缺陷后进行回归测试
| 工具 | 用途 | 特点 |
|---|---|---|
| Jest | 单元测试 | 快速、功能丰富 |
| Vue Test Utils | Vue组件测试 | 专门为Vue设计 |
| Cypress | 端到端测试 | 现代前端测试框架 |
| Playwright | 端到端测试 | 跨浏览器测试 |
| Lighthouse | 性能和可访问性测试 | Google开源工具 |
| ESLint | 代码质量检查 | 静态代码分析 |
| Prettier | 代码格式化 | 保持代码风格一致 |
| 工具 | 用途 | 特点 |
|---|---|---|
| Jira | 测试管理 | 敏捷项目管理 |
| TestRail | 测试管理 | 专业测试管理工具 |
| Zephyr | 测试管理 | 与Jira集成 |
| GitHub Actions | CI/CD | 自动化测试 |
| GitLab CI | CI/CD | 自动化测试 |
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 测试用例执行慢 | 测试环境配置不当 | 优化测试环境，使用并行测试 |
| 测试覆盖不足 | 测试用例设计不全面 | 设计更全面的测试用例 |
| 测试数据管理困难 | 测试数据复杂 | 使用测试数据生成工具 |
| 缺陷重现困难 | 缺陷环境复杂 | 详细记录缺陷环境和步骤 |
| 测试与开发不同步 | 需求变更频繁 | 采用敏捷测试方法，快速适应变更 |
| 跨浏览器兼容性问题 | 浏览器差异 | 使用跨浏览器测试工具，如Playwright |
| 响应式布局问题 | 屏幕尺寸差异 | 测试不同屏幕尺寸，使用断点测试 |
本前端Web测试规范提供了全面的测试指南，包括测试策略、测试类型、测试工具、测试流程、测试环境和测试最佳实践等方面。通过遵循本规范，测试人员可以系统地进行前端Web测试，确保家族树应用前端的质量和用户体验。
测试是一个持续改进的过程，需要不断地学习和适应新的测试方法和工具。测试人员应该保持学习，关注最新的测试技术和趋势，不断提高测试水平。