Cypress中点击复选框触发重复get_time_slots API调用问题求助

可能原因 #

手动操作与Cypress模拟事件的行为存在差异，或组件showSlot方法间接触发了get_time_slots请求，也可能是测试流程中状态未稳定就执行了后续操作。

解决方案 #

1. 等待API调用完成后再操作复选框

确保日期选择触发的第一次API请求完全结束，避免状态未同步导致额外调用：

// 拦截并标记API请求
cy.intercept('POST', 'get_time_slots').as('getTimeSlots')

// 操作日期选择框并触发change事件
cy.get('.datepicker').type('2024-05-20').trigger('change')

// 等待第一次API调用完成
cy.wait('@getTimeSlots')

// 再执行复选框操作
cy.get('#flexCheckDefault').click()

2. 验证日期状态后执行操作

确认日期选择框的值已正确更新，保证组件状态同步：

cy.get('.datepicker').type('2024-05-20').trigger('change')

// 断言日期值已正确设置
cy.get('.datepicker').should('have.value', '2024-05-20')

cy.get('#flexCheckDefault').click()

3. 使用贴近真实用户的事件模拟

Cypress默认模拟事件可能与真实交互有差异，尝试更贴近用户行为的操作方式：

• 手动模拟完整鼠标事件流程：

cy.get('#flexCheckDefault')
  .trigger('mousedown')
  .trigger('mouseup')
  .trigger('click')

• 借助cypress-real-events插件实现真实点击（需先安装）：

npm install cypress-real-events

在cypress/support/e2e.js中导入插件：

import 'cypress-real-events/support'

测试中使用：

cy.get('#flexCheckDefault').realClick()

4. 排查showSlot方法逻辑

检查组件的showSlot函数，确认是否存在以下情况：

• 函数内部直接/间接调用了get_time_slots接口
• 修改了state.appointment.booking_date等会触发日期选择框change事件的状态
• 因日期状态判断逻辑，在显示时段时触发了API请求（手动操作时状态已满足，测试中未同步）

5. 排查请求差异，定位触发源

通过拦截时打印请求参数，区分两次调用的场景：

cy.intercept('POST', 'get_time_slots', (req) => {
  console.log('Request Body:', req.body) // 在控制台查看两次请求的参数差异
  req.reply({ fixture: 'time_slots.json' })
}).as('getTimeSlots')

内容的提问来源于stack exchange，提问作者Toan Tran Van