cy.intercept() 与 cy.trigger() 一起使用时不起作用

Question

我的表单中有一个带有

type=date

的输入。当其值发生变化时，应用程序应该使用 POST 方法调用 API

/get_slots

。我使用

cy.type()

，然后使用

cy.trigger('change')

来触发 API 调用。

我想使用

cy.intercept()

从夹具文件返回模拟数据。然而，似乎

cy.intercept()

从未被调用，而实际的 API 仍在被调用。

这是代码：

// It is supposed to return the slots from fixture file
cy.intercept('POST', '/get_slots', 'fixture:slot-list.json').as('getSlots');

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

在 ROUTE 部分，Cypress 显示 stubbed = YES

我尝试使用

cy.wait("@getSlots")

，但它显示：

Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: getSlots. No request ever occurred.Learn more

任何人都可以帮助我理解这里的错误以及如何修复它吗？

Answer 1

在屏幕截图中，最后一列显示了拦截的命中/匹配数。

-

表示没有点击。

因此，要么从应用程序发送到 API 的 URL 不匹配

/get_slots

，要么 POST 从未发生过。

是否发生 POST

查看 devtools Network 选项卡，看看 POST 是否实际发生。

.trigger('change')

可能是错误的事件，您可能需要

.trigger('input')

或

cy.get('form').trigger('submit')

。

如果您有权访问源代码，您可以找出正在使用的事件。

有时您只能使用 cypress-real-events 插件来触发事件，也可以尝试一下。

需要什么routeMatcher

如果 devtools 中存在 POST，则故障出在 RouteMatcher 表达式上，因此您需要在 devtools 中查看完整的 URL 并进行比较。

/get_slots

表达式是一个全局表达式，可能非常挑剔。尝试对之前和之后的路径进行通配符

**/get_slots/*

。

注意

get_slots

应该是一个完整的路径段，即实际 URL 中两个路径分隔符之间的所有文本。

routeMatcher 的其他一些使用方式

• 完整的 URL 字符串（粘贴来自 devtools 的完整 URL）

• 正则表达式

  /\/get_slots