使用cy.trigger()时cy.intercept()未生效的问题排查与解决

常见问题原因 #

• URL匹配不准：你写的拦截路径/get_slots可能和实际请求的完整URL不匹配——比如接口实际带了域名、端口或者前缀（比如/api/get_slots），导致拦截规则没命中。
• 事件触发不对：原生日期输入框或者你用的前端框架（React/Vue这类），可能监听的是input事件而非change事件，只触发change可能没法触发接口请求。
• 输入值没设对：cy.type()可能没完全覆盖输入框原有值，组件没识别到日期真的变了，所以没发请求。

解决步骤 #

1. 把拦截规则改精准 #

先打开Cypress的Network面板，看实际请求的/get_slots完整URL是什么，然后调整拦截：

• 用正则匹配路径后缀，不管前缀是什么都能命中：

cy.intercept('POST', /\/get_slots$/, { fixture: 'slot-list.json' }).as('getSlots');

• 如果接口带基础路径（比如/api/get_slots），直接写全路径：

cy.intercept('POST', '/api/get_slots', { fixture: 'slot-list.json' }).as('getSlots');

注意：别用'fixture:slot-list.json'这种简写，写成{ fixture: 'slot-list.json' }更规范，避免解析问题。

2. 换种方式设置日期并触发事件 #

试试直接给输入框设值，再触发正确的事件：

cy.get('input.datepicker')
  .invoke('val', '2024-01-10') // 直接设置value，比type更靠谱，避免键盘输入的格式问题
  .trigger('input') // 先触发input事件，通知组件值变了
  .trigger('change'); // 再触发change事件，触发接口请求

如果还是不行，先清掉原有值再输入：

cy.get('input.datepicker')
  .clear()
  .type('2024-01-10')
  .trigger('input')
  .trigger('change');

3. 检查Fixture文件 #

确保slot-list.json放在cypress/fixtures文件夹里，而且JSON格式没错误——比如逗号、引号这些别写错了。

4. 确认请求方法 #

再检查下代码里调用/get_slots是不是真的用POST，要是实际是GET，得把拦截里的POST改成GET。

验证 #

改完之后跑测试，看Network面板里/get_slots请求是不是标了stubbed，然后加上cy.wait('@getSlots')应该就不会超时了：

cy.get('input.datepicker')
  .invoke('val', '2024-01-10')
  .trigger('input')
  .trigger('change');

cy.wait('@getSlots'); // 现在应该能成功等到请求

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