如果在賽普拉斯測試期間多次調用請求，如何捕獲請求的“最新”實例？

Question

在我的 Cypress Cucumber 測試中，這是我當前的功能文件場景（這個場景在最后一步失敗）：

Given I log in
Then I am on the dashboard
And the dashboard displays 0 peers (@Peers is called here, & 0 is the correct value here)
When I go to User 1 page
And I click the Add Peer button (@AddPeer request is successful here)
And I go to the dashboard
Then the dashboard displays 1 peers (@Peers is called here. The actual value is 0, but I am expecting 1. It looks like the code is using the response body from the 1st `Peers` intercept)

這是我的步驟定義：

Given('I log in', () => {
    cy.intercept('GET', `**/user/peers`).as('Peers')
    cy.intercept('POST', `**/Peers/add`).as('AddPeer')
});

Then('I am on the dashboard', () => {
    cy.url().should('include', `dashboard`)
})

Then('the dashboard displays {int} peers', expectedPeersCount => {
    cy.wait('@Peers').then(xhr => {
        const peers = xhr.response.body
        expect(peers.length).to.eq(expectedPeersCount)
    });
});

When('I click the Add Peer button', () => {
    dashboard.btnAddPeer().click()
    cy.wait('@AddPeer').then(xhr => {
        expect(xhr.response.statusCode).to.eq(200)
    })
})

When('I go to the dashboard', () => {
    cy.visit('/dashboard');
});

在后端， @AddPeers()等點添加到列表中，而@Peers()返回我的對等點列表。

當我轉到儀表板時， @Peers()返回最新的同行列表。

但出於某種原因，上面的代碼仍在使用響應主體為空的“舊”響應。

有人可以指出我如何獲得“最新” @Peers回復嗎？

這是空的第一個Peers響應：

這是包含 1 個數組項的第二個Peers響應：

嘗試修復：

Given('I log in', () => {
    cy.intercept('GET', `**/user/peers`).as('Peers0')
    cy.intercept('GET', `**/user/peers`).as('Peers1')
});

Then('the dashboard displays {int} peers', expectedPeersCount => {
    cy.wait(`@Peers${expectedPeersCount }`).then(xhr => {
        const peers = xhr.response.body
        expect(peers.length).to.eq(expectedPeersCount)
    });
});

賽普拉斯日志：

Peers1看起來下面是空的，但它不應該是：

然后它在下面看起來像Peers0有填充數組。 注意匹配的cy.intercepts()

Answer 1

我不明白為什么原始代碼不起作用，它看起來非常好（沒有可運行的系統）。

但是“修復”變體是倒退的——最后設置的攔截是第一個匹配的。

從文檔：

此圖顯示route5是檢查的第一個（非中間件）路由，然后是route3 ，然后是route1 。

---

此外，由於每個攔截旨在只捕獲一個調用，因此添加{ times: 1 },以實現這一點。

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers1')                                     // catches 2nd call
  cy.intercept('GET', `**/user/peers`, {times: 1})
    .as('Peers0')                                     // catches 1st call
})

您可以在此屏幕截圖中看到它

其中Peers1首先匹配然后Peers0 ，但以下塊期望相反的順序

Then('the dashboard displays {int} peers', expectedPeersCount => {
  cy.wait(`@Peers${expectedPeersCount }`).then(xhr => {
      const peers = xhr.response.body
      expect(peers.length).to.eq(expectedPeersCount)
  });
})

Called with 0 by And the dashboard displays 0 peers and then called with 1 by Then the dashboard displays 1 peers

---

動態別名

您可以根據響應中有多少對等點動態設置別名。

Given('I log in', () => {
  cy.intercept('GET', `**/user/peers`, (req) => {
    req.continue().then(res => {
      if (re.body.length === 0) {
        req.alias = 'Peers0'
      }
      if (re.body.length === 1) {
        req.alias = 'Peers1'
      }
    })
  })
})

如果這可行，那么您無需擔心設置順序。

Answer 2

這里有點誤會。 別名攔截的cy.wait()將只等待第一個匹配給定參數的請求。

cy.intercept('request').as('call')
// some actions to trigger request
cy.wait('@call')
// later in the test trigger same request

// this will refer to the first request made
// by the app earlier in the test
cy.wait('@call')

您可以使用唯一別名進行另一個攔截，然后在新的唯一別名上使用.wait() 。

cy.intercept('request').as('call')
// some actions to trigger request
cy.wait('@call')
// later in the test trigger same request

cy.intercept('request').as('newCall')
// some actions to trigger same request
cy.wait('@newCall')

或者您可以使用相同的方法並使用cy.get()來獲取匹配請求的列表，但是，這可能是一個不錯的選擇，因為cy.get()不會等待您的新請求完成。

cy.intercept('request').as('call')
// some actions to trigger request
cy.wait('@call')
// later in the test trigger same request

// have to ensure the request is completed by this point
// to get the list of all matching and hopefully
// the last request will be the one you seek
cy.get('@call.all')
  // get last matching request
  .invoke('at', -1)