DEV Community

Cover image for Manage Your Cypress Logs Like a Pro
Yevhen Laichenkov
Yevhen Laichenkov

Posted on

15 3 2 2 2

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


Enter fullscreen mode Exit fullscreen mode

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';


Enter fullscreen mode Exit fullscreen mode

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 });
    },
  },
};


Enter fullscreen mode Exit fullscreen mode

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' });
});


Enter fullscreen mode Exit fullscreen mode

You will see the following in the interactive mode:
Image description

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

Follow me on GitHub and Twitter.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series