Cypress 7：cy.intercept 问题中的 onRequest

如何解决Cypress 7：cy.intercept 问题中的 onRequest

我们有以下代码断言在有请求时出现一个微调器：

以下代码在 cypress 6.4.0 中运行正常

cy.intercept({
  url: '*',onRequest: () => {
    cy.get('[data-testid=spinner-loading-indicator]')
    .should('exist')
  },});

不过在 cypress 7.5.0 中，onRequest 不再有效 我们发现的最相似的是

cy.intercept('*',(req) => {
  req.on('before:response',(res) => {
     cy.get('[data-testid=spinner-loading-indicator]').should('exist')
  })
})

这将返回一个错误，因为 Cypress 不允许这里的承诺（cy.get() 是一个承诺）

有没有人遇到过类似的问题，如果解决了怎么办？

解决方法

你可以改变

cy.get('[data-testid=spinner-loading-indicator]').should('exist')

到这里

expect(Cypress.$('[data-testid=spinner-loading-indicator]')).to.exist

不同之处在于第二个 (jQuery) 测试不会重试 - 不确定这是否会成为问题，无法从您的问题中判断事件的顺序。

---

测试拦截器内的加载指示器感觉有点像同时测试两件事，但时间可能会让你觉得事情很不稳定（尤其是在 CI 中）

这个序列有什么不好的原因吗？

cy.intercept('*').as('requested')

// trigger events
cy.visit('some-url')       // if initiated on load
// or
cy.get('button').click()   // if user-initiated

cy.wait('@requested')      
cy.get('[data-testid=spinner-loading-indicator]').should('exist')

---

就事件而言，routeHandler (req) => {...} 是 onRequest 事件的触发，但您仍然无法调用内部命令，

即这在逻辑上等同于 onRequest 语法，

cy.intercept('*',(req) => {
  cy.get('[data-testid=spinner-loading-indicator]')        // throws an error 
})