Way to log API response time in Cypress

Question

I was trying to log the API response time in Cypress, but could not find any solution. What to use, cy.intercept() or cy.request()?

I was trying to use the advice like this:

cy.intercept('POST', '**/create-insurance-view-model', (req) => {
                    const start = Date.now()
                    req.continue(res => {
                      res.responseTime = Date.now() - start;
                    })
                  }).as('apiViewModel')

cy.wait('@apiViewModel').then(intercept => {
                    cy.log(`Time to get the license plate data was: ${intercept.response.responseTime} seconds`)
                })

And I am getting undefined in the log.

Paolo · Answer 1 · 2023-01-27T19:44:41.513

5

There's two scenarios

there's a web page that calls an API and you want to test the response time. This scenario uses cy.intercept()
you have an API that you want to test directly (not called from a web page). This scenario uses cy.request() to start each API call.

Examples:

it('tests API response via web page', () => {

  cy.intercept('api/resource/3', (req) => {
    const start = Date.now()
    req.continue(res => {
      res.headers.responseTime = Date.now() - start;
    })
  }).as('apiCall')

  cy.visit('/')

  cy.wait('@apiCall').then(intercept => {
    cy.log(intercept.response.headers.responseTime)
  })

it('tests API response by direct call', () => {

  const start = Date.now()

  cy.request('api/resource/3')
    .then(response) => {
      const responseTime = Date.now() - start;
      cy.log(responseTime)
    })

edited Jan 27 '23 at 19:44

answered Jan 19 '23 at 20:04

Paolo

3,530
7
21

I used it like this: cy.intercept('POST', '**/create-insurance-view-model', (req) => { const start = Date.now() req.continue(res => { res.responseTime = Date.now() - start; }) }).as('apiViewModel') cy.wait('@apiViewModel').then(intercept => { cy.log(`Time to get the license plate data was: ${intercept.response.responseTime} seconds`) }) And I am getting undefined in the log. – FitFju Jan 22 '23 at 13:19
My bad, it seems that you cannot add arbitrary properties to the response! But you can add it to the `headers`, see my change above. – Paolo Jan 27 '23 at 19:45
see my answer below, I figured out. Your answer was big help with it. – FitFju Jan 28 '23 at 14:17

score 0 · Accepted Answer · answered Jan 28 '23 at 14:13

Ok, so I solved it like this, thanks to the help from Paolo. Addes custom commands.

let responseTime

Cypress.Commands.add('inteceptasd', (method, request, apiVariable) => {
    cy.intercept(method, request, (req) => {
        const start = Date.now()
        req.reply(() => {
            responseTime = (Date.now() - start) / 1000
        })
    }).as(apiVariable)
})

Cypress.Commands.add('waitasd', (apiVariable, timeVariable, describe) => {
    cy.wait(apiVariable).then(() => {
        timeVariable = responseTime
        cy.log(timeVariable)
        cy.on('test:after:run', (test) => addContext({ test }, `Time to get the endpoint data ${apiVariable} was: ${timeVariable}s - ${describe}`))
    })
})

Then I used it in test like this

cy.interceptForResponseTime('GET', '**/get-vehicle-identification*', 'apiVehicleByVin')
cy.get('cebia-price-loader > div > .btn').contains(domData.btnLoadPrice).should('exist').click()
cy.waitWithResponseTime('@apiVehicleByVin', 'timeVehicleByVin', 'description for this api time check')

Also i have this in my commands.js file require('cypress-delete-downloads-folder').addCustomCommand(); Cypress.Commands.add('addContext', (context) => { cy.once('test:after:run', (test) => addContext({ test }, context)); }) — FitFju, Jan 28 '23 at 14:15

Way to log API response time in Cypress

2 Answers2