القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/bage2014/study --skill frontend-testingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导
项目规范技能，提供项目结构、文档管理、代码忽略等方面的标准和最佳实践
MCP Apps项目规范 - 后端驱动UI渲染架构。所有页面由后端生成HTML通过MCP协议返回渲染。Invoke when developing or maintaining MCP Apps projects, especially when creating new pages, tools, or stores.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| 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();
});
});
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测试，确保家族树应用前端的质量和用户体验。
测试是一个持续改进的过程，需要不断地学习和适应新的测试方法和工具。测试人员应该保持学习，关注最新的测试技术和趋势，不断提高测试水平。