Cypress：如何访问 POST 请求的正文？

Question

Cypress 有没有办法检查 POST 请求的正文？

例如：我在表单中输入了一些数据，然后按“提交”。表单数据通过 POST 请求发送，与标头数据之间用空行分隔。

我想检查表单数据。是否包含我输入的所有数据并且它们是否正确。

赛普拉斯可能做到这一点吗？

cy.get('@login').then(function (xhr) {
    const body = xhr.requestBody;
    console.log(xhr);
    expect(xhr.method).to.eq('POST');
});

xhr-object 不包含传输的数据。

Answer 1

这应该是可能的。

describe('Capturing data sent by the form via POST method', () => {
  before(() => {
    Cypress.config('baseUrl', 'https://www.reddit.com');
    cy.server();
    cy.route({
      method: 'POST',
      url: '/login'
    }).as('redditLogin');
  });
  it('should capture the login and password', () => {
    cy.visit('/login');
    cy.get('#loginUsername').type('username');
    cy.get('#loginPassword').type('password');
    cy.get('button[type="submit"]').click();

    cy.wait('@redditLogin').then(xhr => {
      cy.log(xhr.responseBody);
      cy.log(xhr.requestBody);
      expect(xhr.method).to.eq('POST');
    })
  });
});

这是您在 Chrome 开发者工具中检查数据的方法。

当您在 Cypress 中运行测试时，您应该会看到与在 Chrome 开发人员工具中看到的相同的内容。