How to capture console logs in Cypress

Capturing console logs from the browser during Cypress tests can be useful for debugging and verifying application behavior. Cypress provides a way to access and assert on console logs using its cy.log() command along with the on('window:before:load') event handler. Here’s how you can capture console logs in Cypress:

Capturing Console Logs in Cypress

To capture console logs, you can intercept them during the test execution. Here’s an example of how you can do this:

describe('Capture Console Logs', () => {
  beforeEach(() => {
    // Clear any previous logs
    cy.clearConsole();

    // Intercept console logs in the browser
    cy.on('window:load', (win) => {
      cy.spy(win.console, 'log').as('consoleLog');
      cy.spy(win.console, 'error').as('consoleError');
      cy.spy(win.console, 'warn').as('consoleWarn');
      cy.spy(win.console, 'info').as('consoleInfo');
    });

    // Visit your application where logs are expected
    cy.visit('https://your-app.com');
  });

  it('should capture console logs', () => {
    // Perform actions that trigger console logs in your application
    cy.get('.trigger-console-log').click();

    // Assert on console logs using aliases
    cy.get('@consoleLog').should('be.calledWith', 'This is a console log message');
    cy.get('@consoleError').should('not.be.called'); // Ensure no error logs
  });
});

Explanation:

1. Clearing Console: cy.clearConsole() clears any previous console logs to start fresh.

2. Event Listener: cy.on('window:load', ...) sets up event listeners on the browser window when Cypress loads your application. Here, we spy on various console methods (log, error, warn, info) to capture their usage.

3. Assertions: Using cy.get('@alias'), you can assert on the captured console logs. For example, cy.get('@consoleLog').should('be.calledWith', 'message') checks if console.log was called with a specific message.

4. Visiting the Application: cy.visit('https://your-app.com') loads your application where console logs are expected to be triggered.

5. Triggering Actions: Use Cypress commands like cy.get('.trigger-console-log').click() to simulate user actions that trigger console logs.