Cypress：如何在拦截返回fixture前完成断言？

你可以通过cy.intercept的动态响应函数实现需求，无需依赖固定时长的delay。核心思路是拦截请求后暂不返回响应，等完成加载状态断言后，再手动触发响应返回。

具体实现代码 #

describe('表单打印流程测试', () => {
  it('无需固定延迟，精准控制请求响应时机', () => {
    cy.intercept('GET', '/printers', ['printer1']);

    // 存储resolve函数，用于手动触发响应返回
    let resolvePrintResponse;
    const waitableResponse = new Promise(resolve => {
      resolvePrintResponse = resolve;
    });

    // 用动态响应函数返回Promise，暂不响应请求
    cy.intercept('POST', '/print', () => waitableResponse).as('printRequest');

    cy.visit('/form');

    cy.get('mat-form-field#box-identifier input').as('boxIdentifier');
    cy.get('div#print > button').as('printButton');

    cy.get('@boxIdentifier').type('1234567');
    cy.get('@printButton').click();

    // 验证加载状态：进度条显示、按钮禁用、组件处于打印中状态
    cy.get('app-shipping-label').should('have.class', 'printing');
    cy.get('@printButton').should('be.disabled');
    cy.get('mat-progress-bar').should('be.visible');

    // 手动触发响应，传入预设的fixture数据
    resolvePrintResponse({ fixture: 'print-response-ok.json' });

    // 等待请求完成，验证结束状态
    cy.wait('@printRequest');
    cy.get('app-shipping-label').should('have.class', 'ready');
    cy.get('mat-progress-bar').should('not.exist');
  });
});

原理说明 #

1. 动态响应函数：cy.intercept支持传入函数作为响应，该函数可返回Promise。只有当Promise被resolve时，Cypress才会把响应返回给前端。
2. 手动控制响应时机：提前创建Promise并保存其resolve函数，完成加载状态断言后调用该函数，传入fixture数据，此时请求才会完成。
3. 规避固定延迟的问题：相比delay，这种方式完全同步测试步骤，不会因环境性能差异导致测试不稳定（比如低性能环境下延迟时长不足、高性能环境下浪费时间）。

之前方案的问题分析 #

• 无delay的静态响应：Cypress会立即返回fixture，前端还未渲染加载状态，断言直接失败。
• delay+then内的断言：Cypress命令是异步队列执行的，cy.wait().then()内的断言会在请求完成后执行，此时前端已切换到结束状态，加载状态断言必然失败。

内容的提问来源于stack exchange，提问作者Aisteru Firë