如何在Cypress中动态修改GraphQL请求的Fixture数据

核心思路 #

要实现复用Fixture并修改特定字段，不能直接通过req.reply({ fixture: 'mockData.json' })返回静态文件，需要先读取Fixture数据，修改指定字段后再返回修改后的完整对象。

单个测试用例的实现（TypeScript） #

it('验证用户状态为CLAIMED的场景', () => {
  // 读取Fixture文件并指定类型
  cy.fixture<{
    data: {
      user: {
        user: {
          status: string;
          // 其他字段可按需添加类型定义
        };
      };
    };
  }>('mockData.json').then((mockData) => {
    // 修改目标字段
    mockData.data.user.user.status = 'CLAIMED';

    // 拦截GraphQL请求
    cy.intercept('POST', '/graphql', (req) => {
      // 匹配指定的operationName
      if (req.body.operationName === 'operationName') {
        // 返回修改后的完整数据
        req.reply(mockData);
      }
    });

    // 触发请求的页面操作
    cy.visit('/target-page');

    // 执行断言逻辑
    cy.get('[data-test="user-status"]').should('have.text', 'CLAIMED');
  });
});

封装为自定义命令（复用逻辑） #

如果多个测试用例都需要修改该字段，可以封装成Cypress自定义命令，减少重复代码：

在cypress/support/commands.ts中添加：

// 定义数据类型，确保TypeScript类型安全
interface UserInviteData {
  id: string;
  sentAt: null | string;
  sendDate: null | string;
  status: string;
  __typename: string;
}

interface UserProfile {
  userId: number;
  inviteId: string;
  status: string;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  user: null;
  invite: UserInviteData;
}

interface MockGraphQLResponse {
  data: {
    user: {
      user: UserProfile;
    };
  };
}

Cypress.Commands.add('interceptUserQueryWithStatus', (targetStatus: string) => {
  cy.fixture<MockGraphQLResponse>('mockData.json').then((mockData) => {
    // 修改指定字段
    mockData.data.user.user.status = targetStatus;
    // 拦截并返回修改后的数据
    cy.intercept('POST', '/graphql', (req) => {
      if (req.body.operationName === 'operationName') {
        req.reply(mockData);
      }
    });
  });
});

然后在测试用例中调用：

it('验证用户状态为CLAIMED的场景', () => {
  cy.interceptUserQueryWithStatus('CLAIMED');
  cy.visit('/target-page');
  cy.get('[data-test="user-status"]').should('have.text', 'CLAIMED');
});

it('验证用户状态为NEEDS_MORE的场景', () => {
  cy.interceptUserQueryWithStatus('NEEDS_MORE');
  cy.visit('/target-page');
  cy.get('[data-test="user-status"]').should('have.text', 'NEEDS_MORE');
});

关键注意事项 #

• 匹配正确的operationName：确保req.body.operationName的值与实际GraphQL请求中的名称完全一致，否则无法触发拦截逻辑。
• 字段路径准确性：修改字段时要严格对应Fixture的嵌套结构（示例中为mockData.data.user.user.status），路径错误会导致修改无效。
• TypeScript类型定义：添加类型定义可以避免拼写错误，同时获得IDE的语法提示，提升代码可维护性。

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