运行 Cypress 测试时如何等待 AJAX 请求完成？

Question

我有一套针对我的网络应用程序的端到端赛普拉斯测试。当测试运行时，AJAX 调用是针对真实服务器进行的（即请求没有被模拟或存根）。目前，我执行如下操作以确保测试等待这些 AJAX 请求完成

// declare the AJAX request we will wait for
cy.route('POST', '/api/authenticate').as('authenticate')

// type the username and password and click the login button
cy.get('#username').type('john-doe')
cy.get('#password').type('secret')
cy.get('#login-button').click()

// wait for the AJAX request to complete before testing the response code
cy.wait('@authenticate')
cy.get('@authenticate').then(xhr => {    
    expect(xhr.status).to.eq(200)
})

这看起来很冗长，有没有更简单的方法？我正在使用最新版本的 Cypress，v. 6.1.0。

Answer 1

Cypress 6.0.0 中已弃用cy.server()和cy.route() 。相反，cypress 引入了cy.intercept()。所以你可以写这样的东西：

// declare the AJAX request we will wait for
cy.intercept('POST', '/api/authenticate').as('authenticate')

// type the username and password and click the login button
cy.get('#username').type('john-doe')
cy.get('#password').type('password')
cy.get('#login-button').click()

// wait till we get 200
cy.wait('@authenticate').its('response.statusCode').should('eq', 200)

//You can also assert request body and response body contents
cy.wait('@authenticate').its('request.body').should('include', 'username')
cy.wait('@authenticate').its('response.body').should('include', 'password')