如何攔截網絡請求並使用賽普拉斯檢查其 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`
});