Cypress测试选择下拉选项后fixture JSON文件未加载、表格未刷新问题

• 仅配置了一次静态拦截返回全量金额数据，选择「负金额」选项后前端发起的带筛选参数的新请求未被正确拦截，要么请求未命中拦截规则，要么仍然返回全量数据，表格无法获取过滤后的负金额内容。
• 下拉选项点击使用原生DOM点击逻辑，部分场景下无法触发前端绑定的筛选事件，导致筛选逻辑未执行。
• 示例提供的amount.json为非法JSON格式，键名未加双引号，会导致Cypress读取fixture失败，返回异常数据。
• 未等待筛选逻辑执行/新请求返回就做后续断言，无法确认数据是否已完成加载刷新。

1. 改用动态拦截适配筛选请求 #

根据请求携带的筛选参数动态返回对应过滤后的fixture数据，代码示例如下：

cy.intercept('/api/amounts/**', (req) => {
  // 读取全量fixture数据
  const allAmountData = require('../fixtures/amount.json').amount
  // 按实际请求的筛选参数调整判断逻辑，示例参数为filter
  if (req.query.filter === 'negative') {
    // 过滤出负金额返回，先去掉千位分隔符再转数字判断
    const negativeAmounts = allAmountData.filter(item => Number(item.replace(/,/g, '')) < 0)
    req.reply({ amount: negativeAmounts })
  } else if (req.query.filter === 'positive') {
    const positiveAmounts = allAmountData.filter(item => Number(item.replace(/,/g, '')) > 0)
    req.reply({ amount: positiveAmounts })
  } else {
    // 全部选项返回全量数据
    req.reply({ fixture: 'amount.json' })
  }
}).as('amountReq')

// 等待初始加载请求完成
cy.wait('@amountReq')

2. 修正下拉操作逻辑，增加加载等待验证 #

使用Cypress原生点击方法，筛选后等待新请求完成再做断言，代码示例如下：

cy.get('.dropdown-header-title').eq(3).click()
// 直接调用Cypress封装的click方法，无需手动取原生DOM元素
cy.get('.dropdown-list-item').contains('Negative').click()
// 等待筛选请求返回，确保前端已拿到负金额数据
cy.wait('@amountReq')
// 验证下拉选中状态
cy.get('.dropdown-header-title').contains('Negative').should('be.visible')
// 补充表格数据验证，确认负金额正确渲染，正金额已被过滤
cy.get('table').contains('-200,000').should('be.visible')
cy.get('table').contains('40000').should('not.exist')

3. 修正fixture文件格式 #

确保amount.json为合法JSON格式，所有键名用双引号包裹：

{
  "amount": ["-200,000", "40000", "400", "-200"]
}

特殊场景适配（前端本地筛选不发请求） #

如果筛选逻辑是前端本地执行、不会发起新接口请求，不需要配置动态拦截，直接增加表格渲染等待验证即可：

cy.get('.dropdown-header-title').eq(3).click()
cy.get('.dropdown-list-item').contains('Negative').click()
cy.get('.dropdown-header-title').contains('Negative').should('be.visible')
// 等待前端筛选逻辑执行完成、表格重渲染
cy.get('table').should('not.contain', '40000')

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