在 Cypress 中多次拦截相同的 API 调用

Question

是否可以在同一个测试中使用

cy.intercept

多次拦截同一个API调用？我尝试了以下方法：

cy.intercept({ pathname: "/url", method: "POST" }).as("call1")
// ... some logic
cy.wait("@call1")

// ... some logic

cy.intercept({ pathname: "/url", method: "POST" }).as("call2")
// ... some logic
cy.wait("@call2")

我希望

cy.wait("@call2")

会等待第二次调用API。但是，第二个

cy.wait

将立即继续，因为第一个 API 调用与第二个相同。

Answer 1

更新了 Cypress v7.0.0 于 2021 年 4 月 5 日发布

更改日志显示，从此版本开始，拦截现在以相反的顺序调用

提供给
cy.intercept()
的响应处理程序（通过事件处理程序或通过 req.continue(cb) 提供）将以 相反顺序 调用，直到调用 res.send 或直到不再有响应处理程序为止。

文档中的图表也对此进行了说明

当您设置相同的拦截时，第一个拦截将捕获所有呼叫。但您可以多次等待第一个别名。

这是一个（相当）简单的插图

规格

Cypress.config('defaultCommandTimeout', 10); // low timeout
                                             // makes the gets depend on the waits 
                                             // for success

it('never fires @call2',()=>{

  cy.intercept({ pathname: "/posts", method: "POST" }).as("call1")
  cy.intercept({ pathname: "/posts", method: "POST" }).as("call2")

  cy.visit('../app/intercept-identical.html')
  
  cy.wait('@call1')                               // call1 fires 
  cy.get('div#1').should('have.text', '201')

  cy.wait('@call2')                               // call2 never fires
  cy.wait('@call1')                               // call1 fires a second time
  cy.get('div#2').should('have.text', '201')

})

应用程序

<body>
  <div id="1"></div>
  <div id="2"></div>
  <script>

    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('1').innerText = response.status;
      })
    }, 500)
  
    setTimeout(() => {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: JSON.stringify({ title: 'foo', body: 'bar', userId: 2 }),
        headers: { 'Content-type': 'application/json; charset=UTF-8' },
      }).then(response => {
        document.getElementById('2').innerText = response.status;
      })
    }, 1000)

  </script>
</body>

你可以在Cypress日志中看到它，

命令	致电#	发生（橙色标签）
等等	@call1	1
等等	@call2
等等	@call1	2

Answer 2

// wait for 2 calls to complete
cy.wait('@queryGridInput').wait('@queryGridInput')
// get
cy.get("@queryGridInput.all").then((xhrs)=>{});

@alias.all 将等待所有实例完成。它将返回一个 xhr 数组，其中包含所有匹配的 @alias。

https://www.cypress.io/blog/2019/12/23/asserting-network-calls-from-cypress-tests/

Cypress：我试图拦截源自 1 个按钮单击的 10 个调用，但 cy.wait().should 仅点击最后一个调用

Answer 3

您有很多方法可以做到这一点：

为拦截的同一端点创建唯一的别名

cy.intercept({ pathname: "/posts", method: "POST" }).as("call")

//First Action
cy.get("button").click()
cy.wait("@call").its("request.url").should("contain", "somevalue")

//Second Action
cy.get("button2").click()
cy.wait("@call").its("request.url").should("contain", "othervalue")

创建特定的en端点，可以使用glob模式生成动态端点

//notice path key instead of pathname
cy.intercept({path: "/post*parameter1=true", method: "POST"}).as("call1")

//First Action
cy.get("button").click()
cy.wait("@call1").its("request.url").should("contain", "somevalue")

cy.intercept({path: "/post*parameter2=false", method: "POST"}).as("call2")

//Second Action
cy.get("button2").click()
cy.wait("@call2").its("request.url").should("contain", "othervalue")

验证结束时调用的所有端点

 cy.intercept({ pathname: "/posts", method: "POST" }).as("call")

 //First Action
 cy.get("button").click()
 cy.wait("@call")

 //Second Action
 cy.get("button2").click()
 cy.wait("@call")

 //you can add the number of request at the finish of alias
 cy.get("@call.1").its("request.url").should("contain", "somevalue")
 cy.get("@call.2").its("request.url").should("contain", "othervalue")

 //another option instead of add the number of request maybe use the position in letters, but I think that it only works for first and last.
 cy.get("@call.first").its("request.url").should("contain", "somevalue")
 cy.get("@call.last").its("request.url").should("contain", "othervalue")

Answer 4

如果您的请求在某些方面有所不同，我会在各个请求上使用“别名”。就我而言，我向同一路线发出了多个发布请求，但正文略有不同。所以我最终做了这样的事情： cy.intercept("POST", '/your_route', (req) => { if (req.body.hasOwnProperty('your_prop')) { req.alias = 'your_alias'; req.reply(your_response); } });

这将拦截并存根在正文中具有所需属性的 post 请求。

在 Cypress 中多次拦截相同的 API 调用

问题描述投票：0回答：4

4个回答

更新了 Cypress v7.0.0 于 2021 年 4 月 5 日发布

最新问题

在 Cypress 中多次拦截相同的 API 调用

问题描述 投票：0回答：4

4个回答

更新了 Cypress v7.0.0 于 2021 年 4 月 5 日发布

最新问题

问题描述投票：0回答：4