如何拦截网络请求并使用赛普拉斯检查其 requestHeaders

Question

我正在与赛普拉斯合作，我正在测试前端。

我想检查以下网络调用的 requestHeaders。 该调用已被拦截并存根，即 AssessmentStub：

在 browserDevTools 中，您可以看到以下内容：我想断言您可以在请求标头中找到的 x 分类及其值。

此调用是 webaplication 请求的 GET 调用。 我正在测试 UI 并想检查它是否在请求 Header 中请求正确的 x 分类。

代码现在如下所示，但它不起作用：

       it.only('Is the Frontend requesting the correct API-Endpoint after changing the Classification', () => {
    cy.get('app-assessment-tests-header > app-classification-selector').click()
    cy.intercept('GET', '**/api/assessmenttestreference').as('AssesmentStub')

    cy.get('.popup').contains('HAVO').click()

    cy.get('@AssesmentStub').then((request) => {
        expect(Request.Headers).to.have.property('x-classification', 'f0651c9a-649b-4217-a85f-ce5c79f0d773')
    })

});

Answer 1

你可以试试这个：

cy.wait('@AssesmentStub')
  .its('request.headers')
  .should(
    'have.property',
    'x-classification',
    'f0651c9a-649b-4217-a85f-ce5c79f0d773'
  )

Answer 2

您提供的代码的问题是cy.get()产生整个网络调用，包括请求和响应。 下面的代码应该让你更接近。

it.only('Is the Frontend requesting the correct API-Endpoint after changing the Classification', () => {
    cy.get('app-assessment-tests-header > app-classification-selector').click()
    cy.intercept('GET', '**/api/assessmenttestreference').as('AssesmentStub')

    cy.get('.popup').contains('HAVO').click()

    cy.get('@AssesmentStub').then((call) => {
        expect(call.request.Headers).to.have.property('x-classification', 'f0651c9a-649b-4217-a85f-ce5c79f0d773')
    }) // use `call.request` instead of `request`
});