如何在Cypress测试中通过自定义配置跳过after钩子？

问题背景 #

当前通过判断测试标题路径（Cypress.currentTest.titlePath[0]）来跳过特定测试的after钩子执行，希望改为给describe添加自定义布尔参数（如skipAfter: true）实现更灵活的控制，但原生describe仅支持字符串作为标题参数。

解决方案 #

通过封装自定义的describe函数，将自定义参数挂载到测试上下文，再在after钩子中读取该参数判断是否跳过执行。

步骤1：封装带自定义参数的describe函数 #

在support/hooks.ts中添加以下封装代码：

// 封装支持自定义参数的describe
export const describeWithOptions = (options: { title: string; skipAfter?: boolean }, callback: () => void) => {
  describe(options.title, function() {
    // 将自定义参数挂载到当前describe的上下文
    (this as any).skipAfter = options.skipAfter;
    callback();
  });
};

步骤2：在测试文件中使用自定义describe #

修改测试文件test.cy.ts，使用封装后的describeWithOptions并传入自定义参数：

import { describeWithOptions } from '../support/hooks';

describeWithOptions({ title: 'Name of test', skipAfter: true }, () => {
  it('Does something', () => {
    cy.el('btnCompanySettings').click({ force: true });
  });
});

步骤3：修改after钩子判断自定义参数 #

更新hooks.ts中的after钩子，读取当前测试所属describe的自定义参数：

after(() => {
  // 获取当前测试的父级describe上下文，判断是否需要跳过钩子
  const parentDescribeContext = Cypress.currentTest?.parent;
  if (parentDescribeContext && (parentDescribeContext as any).skipAfter) {
    return;
  }

  // 原有钩子执行逻辑
  cy.wait(2500);
  cy.el('btnLogoutUser').should('exist').click({ force: true });
  cy.url().should('contain', 'login');
  cy.task('getCompany').then((data: any) => {
    cy.task('cleanCompany', data.company.company_id).then((response: any) => {
      cy.log(`
=================================================
Removed company with id: ${response.substring(47)}
=================================================
      `);
    });
  });
  localStorage.clear();
});

原理说明 #

Cypress的describe块内部的this指向当前测试块的上下文，我们可以通过自定义describe函数将参数挂载到这个上下文。在after钩子中，通过Cypress.currentTest.parent可以获取到当前测试所属的describe上下文，从而读取到挂载的skipAfter参数，实现条件跳过钩子的逻辑。

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