迁移Capybara测试至Cypress.io：SPA场景下测试效率优化问询

我完全明白你现在的困境——2000多个测试用例，每个都要走页面点击流程创建发布offer，光是这一步就耗1.5分钟，测试效率肯定低到爆炸，尤其是SPA架构下，这种前端操作的等待时间只会更拖后腿。下面是几个能帮你大幅提速的优化方案，都是我迁移测试时亲测有效的：

1. 直接调用后端API创建测试数据 #

这绝对是最立竿见影的提速方式，跳过前端所有点击等待，直接和后端接口通信生成已发布的offer：

• 先梳理清楚后端负责创建、发布offer的API接口（比如POST /api/offers创建、PATCH /api/offers/:id/publish发布）
• 在Cypress里用cy.request()直接调用这些接口，还能封装成自定义命令复用：

  // 封装成自定义命令，在cypress/support/commands.js里定义
  Cypress.Commands.add('createAndPublishOffer', (offerData = {}) => {
    const defaultData = {
      title: 'Cypress测试Offer',
      description: '自动创建的测试发布Offer',
      price: 99,
      // 其他必填字段
    };
    return cy.request('POST', '/api/offers', {...defaultData, ...offerData})
      .then(res => {
        const offerId = res.body.id;
        return cy.request('PATCH', `/api/offers/${offerId}/publish`, { status: 'published' })
          .then(() => res.body);
      });
  });
  
  // 测试用例里直接调用，几秒就能完成
  it('测试Offer详情页', () => {
    cy.createAndPublishOffer().then(offer => {
      cy.visit(`/offers/${offer.id}`);
      // 后续测试逻辑
    });
  });
  

2. 提前准备测试数据库种子数据 #

如果你的测试环境有独立数据库，可以提前批量插入一批已发布的offer种子数据：

• 写个脚本（Node.js/Ruby都可以），在测试运行前执行，往测试库插入预设的offer数据
• 在Cypress的before()钩子中调用这个脚本，或者直接用数据库客户端（比如pg操作PostgreSQL）插入数据
• 好处是一次性搞定所有测试需要的基础数据，不用每个测试都重复创建

3. 复用测试上下文的已有数据 #

如果多个测试用例可以共享同一个已发布offer，别每个测试都重新造轮子：

describe('Offer相关测试套件', () => {
  let testOffer;
  before(() => {
    // 整个测试套件只创建一次offer
    cy.createAndPublishOffer().then(offer => {
      testOffer = offer;
    });
  });

  it('能正常展示Offer详情', () => {
    cy.visit(`/offers/${testOffer.id}`);
    cy.get('.offer-title').should('contain', testOffer.title);
  });

  it('能编辑已发布的Offer', () => {
    cy.visit(`/offers/${testOffer.id}/edit`);
    cy.get('input[name="title"]').clear().type('修改后的Offer标题');
    cy.get('button[type="submit"]').click();
    // 验证修改结果
  });
});

4. 模拟前端API请求（Mock） #

如果后端API还不稳定，或者你只想单独测前端逻辑，可以用Cypress拦截请求并返回模拟数据：

beforeEach(() => {
  // 拦截前端获取Offer列表的请求，直接返回预设的已发布Offer
  cy.intercept('GET', '/api/offers', {
    body: [
      {
        id: 'mock-offer-001',
        title: 'Mock已发布Offer',
        status: 'published',
        price: 199,
        description: '这是一个模拟的已发布测试Offer'
      }
    ]
  }).as('getOffers');
});

it('前端能正确渲染已发布的Offer列表', () => {
  cy.visit('/offers');
  cy.wait('@getOffers');
  cy.get('.offer-item').should('have.length', 1);
});

额外提醒：测试后清理数据 #

不管用哪种方式，测试结束后记得清理测试数据，避免脏数据影响后续测试：

• 用cy.request()调用删除接口删掉测试创建的offer
• 在after()或afterEach()钩子中执行数据库清理脚本

内容的提问来源于stack exchange，提问作者Daniel Słaby