javascriptmethodscypressbuilt-incypress-custom-commands

Overwriting an existing command with Cypress


I'm trying to overwrite an existing command in Cypress.io. I'm looking to log() a route response's status & the route's url to extend the functionality of the built-in route(). Unfortunately, I get this message The route undefined had a undefined status code. in the console. Note, I'm using the browser's console momentarily. Eventually, I'll use the log() built-in method. This is what I have tried so far:

cypress/support/commands.js
Cypress.Commands.overwrite('route', (originalFn, response) => {
  console.log(`The route ${response.url} had a ${response.status} status code.`);

  return originalFn(response);
});

Update:

I'm getting the route now, but I still don't get response or status. This is my current code:

Cypress.Commands.overwrite('route', (originalFn, url, response) => {
  console.log(`The route ${url} had ${response} status code`);
  return originalFn(url, response);
});

Solution

  • When using the pattern cy.route(method, url, response), the response parameter is use to stub the call and return the supplied response to your app, see (route() - Arguments)

    response (String, Object, Array)

    Supply a response body to stub in the matching route.

    Note that creating an overwrite of cy.route() will be hooking into the route configuration, not the capture of the route.

    The pattern cy.route(options) has an onResponse option which can be used to console.log() the response, but cy.log() does not work there, probably because we invoke a command inside a command.

    Cypress.log() can be used instead.

    cy.route({
      url: 'http://example.com',
      method: 'GET',
      onResponse: (response => {
        const message = `The route '${response.url}' had a ${response.status} status code.`;
        const log = Cypress.log({
          displayName: 'Route debugging',
          message: message,
          consoleProps: () => {
            // return an object which will
            // print to dev tools console on click
            return {
              message: message,
            }
          }
        })
        log.finish();  // remove log spinner
      })
    })
    
    /*
      Command log output:
    
        ROUTE DEBUGGING
        The route 'http://example.com' had a 200 status code.
    
    */