testing - Cypress - 在点击后记录来自请求的响应数据()

Question

虽然我知道这可能不是最佳实践，但我想要实现的是在整个 UI 中创建记录后从数据库中静默删除记录。在 htat 方式中，我希望尽可能保持我们的测试环境清晰并减少测试数据的噪音。

在我的测试通过单击 UI 创建新记录后，我等待 POST 请求完成，然后我想从响应中提取 id(这样我可以通过调用 cy.request('DELETE', '/id')).

这是我作为展示展示的示例测试。我想知道为什么在此示例中没有记录任何内容。

it('GET cypress and log', () => {
  cy.server()
    .route('**/repos/cypress-io/cypress*')
    .as('getSiteInfo');

  cy.visit('https://www.cypress.io/dashboard');

  cy.get('img[alt="Cypress.io"]')
    .click()
    .wait('@getSiteInfo')
    .then((response) => {
      cy.log(response.body)
    })
})

据我所见https://docs.cypress.io/api/commands/wait.html#Alias这应该没问题。

Answer 1

您的代码包含两个问题。

首先: click 触发加载新页面，但 cypress 不会等到引发 PageLoad 事件(因为您不使用 visit)。在我的 PC 上，请求大约需要 5 秒，直到它在 click 后被触发。所以你应该使用 wait(..., { timeout: 10000 })。

第二: wait() 生成 XHR 对象，而不是响应。所以您在 then 中的代码不正确。 body 也作为对象传递。因此，您应该使用 JSON.stringify() 在命令日志中查看结果。

此代码有效:

describe("asda", () => {
    it('GET cypress and log', () => {
        cy.server()
          .route('**/repos/cypress-io/cypress*')
          .as('getSiteInfo');

        cy.visit('https://www.cypress.io/dashboard');

        cy  
          .get('img[alt="Cypress.io"]')
          .click()
          .wait('@getSiteInfo', { timeout: 20000 })
          .then((xhr) => {
            cy.log(JSON.stringify(xhr.response.body))
          })
      })
})