cypress: Serialize console.log/info/warn/error to stdout on CLI runs

Any update on this feature? Without it it’s really difficult to tell why my tests which pass locally are failing in headless browser on gitlab. Being able to see browser’s console errors/warnings in the terminal output would give me a great hint what’s wrong in my CI environment.

@jennifer-shehane I tried https://github.com/bahmutov/cypress-failed-log but it’s not relevant to this issue, it only prints cypress commands into terminal output, there is nothing about displaying browser’s errors.

I would also love to finally see this implemented in Cypress. It is very important for debugging failed tests, and that seems to me one of the first things a test tool should enable.

I made a Cypress plugin that prints out all console messages from the browser, including both user-created (console.log) messages and browser-created (CORS errors, etc.) messages.

It only supports Chrome so far, as I can’t figure out a way to connect to Electron’s Chrome Debug Protocol instance from a plugin.

Plugin here: https://github.com/flotwig/cypress-log-to-output

I’ve been bouncing around the different Cypress issues all related to the desire to see the browser logs printed into the CI output (issue #448 and others) and I finally found a workable solution which will spy on the console logs and errors and then print all cypress :

Step 1: Spy on console logs and errors by adding this snippet to cypress/support/index.js:

Cypress.on('window:before:load', (win) => {
    cy.spy(win.console, "log")
    cy.spy(win.console, "error")
})

Step 2: Use https://github.com/bahmutov/cypress-failed-log to print to the terminal on failed tests.

1. Run npm install --save-dev cypress-failed-log
2. Add require('cypress-failed-log'); to cypress/support/index.js
3. Add to cypress/plugins/index.js:

module.exports = (on, config) => {
  on('task', {
    failed: require('cypress-failed-log/src/failed')(),
  })
};

@folmert @MaaikeFox - and others, I hope this answers your search for a solution until this is officially integrated.

There is also this package for outputing verbose information in a good looking way to the terminal when tests fail. https://github.com/archfz/cypress-terminal-report It also shows data for request captured with cy.route. @flotwig could this package be added to the plugins list https://docs.cypress.io/plugins/ ?

You have access to screenshots + video.

how many +1 we need to implement this ? Let all thumbs up ?

This may help some of you as a temporary fix for now: https://github.com/bahmutov/cypress-failed-log

@flotwig Electron apps can be told to produce verbose output in a terminal (stderr) with ELECTRON_ENABLE_LOGGING=true. That includes output from console.log() statements. But for one reason or another it seems like Cypress has it enabled by default (maybe @jennifer-shehane can elaborate on this?). The reason why you don’t generally see console.log statements in the terminal is because Cypress ~cypresses :)~ suppresses them by default. But you can make them visible with DEBUG=cypress:electron npx cypress .... Although some messages would still be unavailable.

@lgandecki can you explain how to get access to console.logs in CI? Nothing logged by the browser or by cy.log is displayed in the CLI output that I can see.

@archfz thanks for writing cypress-terminal-report!

Fwiw, I set my defaultTrimLength to 2000, otherwise default of 200 cuts off stack property of logged errors–you might consider bumping up the default for that.

thanks it works well @archfz

@pshynin There are available workarounds detailed above. If this is a feature you’d like to see in Cypress very soon, please feel free to open a pull request. See our contributing docs for more info.