您可以在 Cypress 中限制请求而不是响应吗？

Question

我正在尝试在 Cypress 中端到端测试文件上传页面，其中包括测试文件上传进度条是否有效。

不幸的是，在本地环境中，上传会立即发生，因此不会显示进度条。

我知道您可以使用模拟慢速网络来限制响应速度。cy.intercept()但是，这并不会降低请求上传速度：

cy.intercept('post', `/route`, (req) => {
    req.on('response', (res) => {
        res.setThrottle(1000) 
    })
}).as('post')

有什么方法可以对传出请求应用限制吗？

Answer 1

在routeHandler中，使用setTimeout()延迟调用req.continue()。

要让命令队列等待setTimeout，请返回一个 Promise 包装器。请参阅请求阶段

如果处理程序返回 Promise，则等待 Promise 解析。

如果您希望延迟时间长于默认的命令超时 4 秒，则需要增加配置，因为cy.intercept不采用超时选项。

Cypress.config('defaultCommandTimeout', 6000)  // timeout in 6 seconds

cy.intercept('POST', '/route', (req) => {
  return new Promise(resolve => {
    setTimeout(() => resolve(req.continue()), 5000) // delay by 5 seconds
  })
}).as('delayedRequest')

// trigger POST

cy.wait('@delayedRequest')  

Cypress.config('defaultCommandTimeout', 4000)  // revert to normal timeout 

中间件

如果您已经有一个复杂的拦截，您可以在中间件拦截中设置延迟。

中间件始终首先执行，但如果不处理请求，则调用将传递到下一个拦截。

// request is delayed here
cy.intercept('POST', '/route', {
    middleware: true                       // middleware always fires first
  }, 
  (req) => new Promise(resolve => 
    setTimeout(() => resolve(), 5000)      // no handler, just delay
  )
)

// then passed to here
cy.intercept('POST', '/route', 
  (req) => {
    req.continue()                            // handler for request
  }
).as('delayedRequest')

// trigger POST

cy.wait('@delayedRequest')