Cypress断言使用建议及项目实践疑问：断言与步骤是否分it()？

嘿，我来帮你理清楚Cypress里断言的使用思路，还有你纠结的it()块划分、以及should()没法加自定义消息的问题～

一、Cypress中断言的核心原则 #

Cypress官方其实和你之前用Protractor的思路一致，推荐把操作和对应的断言放在同一个测试流程里。毕竟Cypress的命令是异步且自带自动重试机制的，should()会自动重试直到断言通过或超时，这种联动能保证测试的可靠性。

二、it()块该怎么划分？同块还是分块？ #

1. 优先选写法1：操作与断言同属一个it()块 #

这绝对是Cypress里的正确打开方式！每个it()应该对应一个完整独立的测试场景——点击按钮+验证模态框打开，这本身就是一个完整的测试目标，拆成两个it()会踩坑：

• Cypress的每个it()都是完全隔离的，执行完一个it()后会自动重置页面状态、清除之前的操作上下文
• 写法2里的第二个it()跑起来时，页面已经回到初始状态，之前点击按钮的操作根本没留下痕迹，模态框自然不存在，断言必然失败

2. 为什么写法2在Cypress里行不通？ #

这点和Protractor差异很大，Protractor的测试上下文不会在it()之间自动重置，但Cypress为了保证测试的独立性，强制每个it()都从干净的页面状态开始，所以拆分写法逻辑上就不成立。

三、解决should()没有自定义消息的痛点 #

虽然Cypress原生的should()确实不支持直接加自定义失败提示，但我们有两种简单的办法来让断言失败的原因更清晰：

• 用cy.log()在断言前打印自定义提示，失败时能从日志里看到是哪一步出了问题
• 改用Chai的expect()语法，它支持直接添加自定义错误消息

给你看优化后的实际代码示例：

推荐写法（带自定义提示） #

describe('用户管理模块测试', () => {
  it('点击「添加新用户」按钮后，验证添加模态框正常打开', () => {
    // 执行点击操作
    cy.contains('button', 'Add new user').click();
    cy.log('已完成「添加新用户」按钮点击操作');

    // 方式1：用cy.log配合should，明确断言目标
    cy.log('开始验证：添加用户模态框是否可见');
    cy.get('[data-testid="add-user-modal"]').should('be.visible');

    // 方式2：用expect语法添加自定义错误消息（更直观）
    cy.get('[data-testid="add-user-modal"]').then($modal => {
      expect($modal).to.be.visible, '添加用户的模态框应该已经打开，但实际未显示';
    });
  });
});

不推荐的写法（Cypress中会失败） #

describe('用户管理模块测试', () => {
  it('点击「添加新用户」按钮', () => {
    cy.contains('button', 'Add new user').click();
  });

  it('验证添加用户模态框已打开', () => {
    // ❌ 这里页面已经被重置，模态框不存在，断言必败
    cy.get('[data-testid="add-user-modal"]').should('be.visible');
  });
});

最后总结一下 #

1. 一定要把操作和对应的断言放在同一个it()块里，这符合Cypress的测试隔离机制，也是官方推荐的最佳实践
2. 用cy.log()或者Chai的expect()来替代原生should()的不足，让断言失败的原因一目了然

内容的提问来源于stack exchange，提问作者icsul