Manage Your Cypress Logs Like a Pro

Cypress has emerged as a fast, easy-to-use, and reliable testing framework, greatly simplifying the process of end-to-end testing for web applications. However, despite its numerous benefits, it's not without its limitations, especially when it comes to logging.

So, one notable limitation is the behavior of the cy.log() command. In its default state, cy.log() only prints log messages in the Cypress Runner UI. Meanwhile, if you need to print in the terminal then this requires extra work and also may become a problem by adding extra complexity to your codebase.

Hence, if you want to print a message in the terminal then you have to create an additional function and add it to a task's object in the configuration file and only after that you can invoke the added task in your tests and see the message in the command line. This might sound crazy to some people, but that is how it works now. So, it would be quite a challenge for new users.

Therefore, I've decided to develop the cypress-log plugin that will handle under the hood all logic where to print the message. So, you don't need to think about what to invoke cy.log() or cy.task('log'). Just simply use the same native command cy.log() with the cypress-log plugin that will override the default behavior and it will print a log message in the environment where it was running.

To install the cypress-log library you need to run the following command in your terminal:

npm install -D cypress-log

After that, you need to integrate the plugin into your Cypress project. In your cypress/support/e2e.js file, add the following:

import 'cypress-log';

Last but not least, you will need to add the log task to your cypress.config.js configuration file:

// import the 'log' function
const { log } = require('cypress-log/log.task');

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // add the 'log' function to the object
      on('task', { log });
    },
  },
};

Then you can use the cy.log() method as you have used it before. For instance, by running the following test:

it('prints to the console', () => {
  cy.log('Hello, World!');
  cy.log({ foo: 'bar', baz: { nested: 'prop' } });
  cy.log(['foo', 'bar']);
  cy.log('another message', ['one', 'two', 'three'], { foo: 'foo' });
});

You will see the following in the interactive mode:

But if you run the test in the non-interactive mode then you will see the following in your terminal:

Follow me on GitHub and Twitter.