I am looking to convert all requests from cy.intercept() into json objects that include: {'method':'____', 'url':'____', 'response_time':'____'} so that they can be written to a json file for performance analysis.

I am currently able to show all of the request methods and URL's but not their response times.

Current code to get network requests:

cy.intercept({method:'GET', url:'**'}).as('gets');
cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

Is it possible to iterate through these individual requests with their response times and save them within an array?

I have tried saving the value returned from intercept() as a variable but it doesn't show all of the requests or their response times.

var gets = cy.intercept({method:'GET', url:'**'}).as('gets');
var posts = cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

cy.writefile('file1.json', gets);
cy.writefile('file2.json', posts);

Thanks in advance.

I am looking to convert all requests from cy.intercept() into json objects that include: {'method':'____', 'url':'____', 'response_time':'____'} so that they can be written to a json file for performance analysis.

I am currently able to show all of the request methods and URL's but not their response times.

Current code to get network requests:

cy.intercept({method:'GET', url:'**'}).as('gets');
cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

Is it possible to iterate through these individual requests with their response times and save them within an array?

I have tried saving the value returned from intercept() as a variable but it doesn't show all of the requests or their response times.

var gets = cy.intercept({method:'GET', url:'**'}).as('gets');
var posts = cy.intercept({method:'POST', url:'**'}).as('posts');
cy.visit('url');

cy.writefile('file1.json', gets);
cy.writefile('file2.json', posts);

Thanks in advance.

• javascript
• cypress

2 Answers 2

You want to use cy.intercept() callbacks to get the duration.

The request callback fires when the request is intercepted, and the response callback is fired when the reponse returns.

const gets = []

const logGet = (request) => {
  const start = Date.now()
  request.continue((response) => {
    const duration = Date.now() - start
    gets.push({url: request.url, duration})
  })
}

cy.intercept('*', logGet)

cy.intercept('**/tracking.min.js').as('done')           // last call I'm interested in

cy.visit('https://docs.cypress.io/api/mands/intercept')

cy.wait('@done').then(() => {                          // wait for last
  console.log(gets)
})

Also, chose a network request that marks the end on the stream. Cypress does not know when calls have ended, so you should cy.wait() on the last one instead of wait(3000).

In above example, I chose the Cypress tracking script.

To gain detailed information about the request and response including the response time, you can utilize the HAR file format (http://www.softwareishard./blog/har-12-spec/). To generate a HAR file on the fly during the execution of your Cypress tests you can use the cypress-har-generator.

describe('my tests', () => {
  before(() => {
    // start recording
    cy.recordHar();
  });

  after(() => {
    // save the HAR file
    cy.saveHar({ waitForIdle: true });
  });

  it('does something', () => {
    cy.visit('https://example.');

    // ...
  });
});

To obtain access to the HAR file within your tests, you can create a custom mand for this purpose:

/// <reference types="cypress" />

namespace Cypress {
  import { Har } from 'har-format';

  interface Chainable<Subject> {
    findHar(fileName?: string): Chainable<Har>;
  }
}

Cypress.Commands.add('findHar', (fileName?: string) =>
  cy
    .readFile(fileName ?? Cypress.spec.name.replace('.ts', '.har'))
    .then(data => cy.wrap<Har>(JSON.parse(data)))
);

Then, you can utilize it to iterate over the entries and map them to the desired structure:

cy.findHar()
  .its('log.entries')
  .then((entries: Entry[]) =>
    entries.map(({ request, time }: Entry) => ({
      response_time: time,
      method: request.method,
      url: request.url,
    }))
  );