Cypress测试中购物车商品数量未递增问题求助

一、测试流程逻辑问题 #

你的beforeEach钩子会在每个测试用例执行前完整运行一次：登录→加商品→登出。当前仅1个it测试块，所以只会执行一次加商品操作，数量自然为1。若要测试“重复添加数量递增”，需将多次添加操作放在同一个测试用例内，而非依赖beforeEach的单次执行。

另外，当前it块内重复执行登录操作，导致测试流程割裂：beforeEach加一次商品后登出，it块重新登录查看购物车，此时购物车仅保留单次添加的数量。

二、后台购物车逻辑验证 #

先确认添加商品的接口逻辑是否正确：当用户购物车中已存在该商品时，是否执行quantity +=1而非创建新的cartItem。可在Cypress中添加接口断言排查：

// 拦截添加购物车的API请求
cy.intercept('POST', '/api/cart/add').as('addToCart')

// 第一次添加商品
cy.get("[data-testid='add-product-button']").eq(1).click()
cy.wait('@addToCart').then(interception => {
  expect(interception.response.body.quantity).to.eq(1)
})

// 第二次添加同一件商品
cy.get("[data-testid='add-product-button']").eq(1).click()
cy.wait('@addToCart').then(secondInterception => {
  expect(secondInterception.response.body.quantity).to.eq(2) // 断言数量递增
})

三、测试状态隔离与清理 #

测试用例需保持独立性，每次测试前重置数据库状态，避免历史数据干扰：

• 若使用Laravel，可通过执行Artisan命令重置数据：

  beforeEach(() => {
    cy.exec('php artisan migrate:fresh --seed') // 仅在测试环境执行
  })
  

• 或通过API接口重置用户购物车：

  beforeEach(() => {
    cy.request('DELETE', '/api/cart/reset', { email: "batman00@gmail.com" })
  })
  

同时检查Cypress浏览器缓存设置，避免会话缓存导致状态异常：
在cypress.config.js中添加配置：

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--disable-storage-reset')
          return launchOptions
        }
      })
    },
  },
})

四、修正后的测试代码示例 #

将测试逻辑调整为在同一个用例中完成多次添加并验证：

describe('tests layout and functionality of cart page', () => {

  beforeEach(() => {
    // 每次测试前重置用户购物车
    cy.request('DELETE', '/api/cart/reset', { email: "batman00@gmail.com" })
    
    // 登录用户
    cy.visit("http://localhost:3000/login")
    cy.get("[data-testid='login-email-field']").type("batman00@gmail.com")
    cy.get("[data-testid='login-password-field']").type("Green@55")
    cy.get("[data-testid='login-submit-button']").click() 
  })

  it('increments cart item quantity when adding the same product multiple times', () => {
    // 导航到商品列表
    cy.get("[data-testid='all-products-link']").click()
  
    // 第一次添加咖啡杯
    cy.get("[data-testid='add-product-button']").eq(1).click()
    
    // 验证购物车数量为1
    cy.get("[data-testid='cart-link']").click()
    cy.get("[data-testid='cart-item-quantity']").should('have.text', '1')
    
    // 返回商品列表再次添加
    cy.get("[data-testid='all-products-link']").click()
    cy.get("[data-testid='add-product-button']").eq(1).click()
    
    // 验证购物车数量递增为2
    cy.get("[data-testid='cart-link']").click()
    cy.get("[data-testid='cart-item-quantity']").should('have.text', '2')
  })

})

五、其他排查点 #

• 检查前端状态管理：添加商品后是否重新拉取购物车数据，或Redux/Context等状态工具是否正确更新本地状态。
• 查看Cypress网络日志：打开测试运行器的Network面板，确认每次添加商品的请求是否正常发送，响应中的quantity字段是否正确递增。

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