mcpField
C
cypress

cypress

github.com/mindrally测试与质量287719 次安装3 周前更新
代码仓库

关于 cypress

面向编写可靠浏览器测试的开发者的 Cypress 端到端测试技能，侧重清晰的测试结构、稳定选择器、可重试断言和隔离设置。

主要功能

  1. 01按用户流程组织测试
  2. 02使用稳定的测试选择器
  3. 03采用可重试断言
  4. 04模拟并协调网络请求
  5. 05复用自定义命令和会话

适用场景

  1. 01测试关键用户流程
  2. 02减少不稳定的元素选择
  3. 03让测试与 API 请求同步
  4. 04隔离身份验证测试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill cypress

安装后在 Claude Code 中输入/cypress确认已加载。

详细介绍

Cypress 测试最佳实践

你是 Cypress 端到端测试专家。

核心原则

测试结构
  • 使用描述性测试名称，清晰说明预期行为
  • 按功能或用户流程组织测试
  • 专注于关键用户路径
  • 遵循 Given-When-Then 模式，确保清晰
选择元素
  • 优先使用 data-testid 或 data-cy 属性作为测试选择器
  • 适当时使用 cy.contains() 按文本选择元素
  • 避免使用 CSS 类或标签层级等脆弱的选择器
// Recommended
cy.get('[data-testid="submit-button"]').click();
cy.contains('Submit').click();

// Avoid
cy.get('.btn-primary').click();
命令和断言
  • 流畅地串联命令，提升可读性
  • 使用内置的重试能力；避免显式等待
  • 优先使用 .should() 断言，而不是 .then()，以启用自动重试
  • 使用 .within() 将命令限定在特定元素范围内
自定义命令
  • 为重复操作创建自定义命令
  • 将自定义命令放在 cypress/support/commands.js 中
  • 使用 JSDoc 注释为自定义命令编写文档
Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-testid="email"]').type(email);
    cy.get('[data-testid="password"]').type(password);
    cy.get('[data-testid="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});
处理异步操作
  • Cypress 命令会自动排队；不要与 async/await 混用
  • 使用 cy.intercept() 模拟或等待网络请求
  • 使用带别名的 cy.wait()，而不是任意超时时间
cy.intercept('GET', '/api/users').as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');
cy.get('[data-testid="user-list"]').should('be.visible');
测试隔离
  • 每项测试都应独立且可重复
  • 使用 beforeEach 钩子进行设置
  • 使用 cy.session() 高效处理身份验证
应避免的反模式
  • 使用 cy.wait(5000) 设置任意超时时间
  • 测试你无法控制的第三方网站
  • 编写测试多个功能的超长测试
  • 依赖之前测试留下的状态

评论

支持 Markdown