CODEWITHSUNDEEP
cypresse2e-testingcypress-log
Jake He
Jake He

Reputation: 2825

Cypress pipe console.log and command log to output

Is it possible to redirect or capture Cypress browser log and command log to output?

I read some Cypress github issues on this topic. But I don't know how to make it work.

Basically, I want to capture all the Cypress GUI command logs in the headless non-GUI mode. If I can include browser console log will be even better. The purpose is to understand what happened when a test fails.

I use teamcity as ci. Here is an example of my build log. I want to see all the command log here too. Actually, any console.log run on the server side using cy.task is displayed in the build log. Running cy.task('log',message) is too manual. Any smarter ways?

[09:49:08][Step 1/1] 2 of 4: new actions (52s)
[09:50:00][Step 1/1] 3 of 4: new actions (52s)
[09:50:53][Step 1/1] 4 of 4: new actions (53s)
[09:51:47][Step 1/1]   (Results)
[09:51:47][Step 1/1] 
[09:51:47][Step 1/1]   ┌─────────────────────────────────────┐
[09:51:47][Step 1/1]   │ Tests:        8                     │
[09:51:47][Step 1/1]   │ Passing:      8                     │
[09:51:47][Step 1/1]   │ Failing:      0                     │
[09:51:47][Step 1/1]   │ Pending:      0                     │
[09:51:47][Step 1/1]   │ Skipped:      0                     │
[09:51:47][Step 1/1]   │ Screenshots:  0                     │
[09:51:47][Step 1/1]   │ Video:        true                  │
[09:51:47][Step 1/1]   │ Duration:     3 minutes, 38 seconds │
[09:51:47][Step 1/1]   │ Estimated:    1 minute, 8 seconds   │
[09:51:47][Step 1/1]   │ Spec Ran:     action/action_spec.js │
[09:51:47][Step 1/1]   └─────────────────────────────────────┘

Upvotes: 96

Views: 111995

Answers (8)

J.Long
J.Long

Reputation: 333

You could use a very handy plugin called cypress-terminal-report.

This provides verbose output on failure including:

  • Commands given
  • Network calls made along with their responses before and after those commands
  • Any console logs or error output

You can find this plugin here: https://www.npmjs.com/package/cypress-terminal-report

For me, it's a must-have tool to improve Cypress E2E.

Upvotes: -1

agoldis
agoldis

Reputation: 1067

Disclaimer: I am the plugin author

You can capture Cypress CI GUI commands in headless mode, together with all the network requests, browser console messages and DOM tree changes using this free open-source plugin: https://github.com/currents-dev/cypress-debugger

As an alternative, you can also use a set of other well-known plugins:

Upvotes: 0

Ruan Nawe
Ruan Nawe

Reputation: 460

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  projectId: "cnpkrh",
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        log(message) {
          console.log(message);
          return null;
        },
      });
    },
  },
});


// cypress/e2e/spec.cy.js
cy.task('log', 'This will be output to the terminal')

Upvotes: 3

InvisibleExo
InvisibleExo

Reputation: 319

I agree with Araon's approach using overwrite on the log function. Another approach, if you want to keep cy.log the default behavior, would be create a custom command. Doc here

Example: Cypress.Commands.add("printLog", (message) => { cy.task("log", {message}); })

This way you can call function printLog vs cy.task("log", {message});

Upvotes: 1

Pratik Patel
Pratik Patel

Reputation: 2451

FYI:

Cypress community is going to provide native support so that we don't have to do any workarounds to print the logs on non-GUI(headless) CLI.

Ongoing issue: https://github.com/cypress-io/cypress/issues/448 includes reference to 3 existing workarounds https://github.com/cypress-io/cypress/issues/448#issuecomment-613236352

Upvotes: 9

M. Justin
M. Justin

Reputation: 21399

Setting the ELECTRON_ENABLE_LOGGING environment variable to 1 will cause all Chrome internal logging to be printed to the console.

ELECTRON_ENABLE_LOGGING=1 npx cypress run

ELECTRON_ENABLE_LOGGING

Prints Chrome's internal logging to the console.

With this enabled, in addition to capturing any existing logging, this will also allow you to manually log within a test using console.log:

console.log('Response JSON: ' + json)

Upvotes: 46

Arnon Axelrod
Arnon Axelrod

Reputation: 1672

Expanding on @Joshua-wade's answer, you can overwrite cy.log to redirect all calls to it to the log task. Just as the following:

Cypress.Commands.overwrite('log', (subject, message) => cy.task('log', message));

Note: there's a small drawback to this: when you run the test using the Test Runner, instead of seeing LOG my message in the command log, you'll see TASK log, my message. But IMHO it's negligible.

Upvotes: 7

Joshua Wade
Joshua Wade

Reputation: 5283

As of Cypress 3.0.0, you can use cy.task() to access node directly and output to the node console. From the docs:

// in test
cy.task('log', 'This will be output to the terminal')

// in plugins file
on('task', {
  log (message) {
    console.log(message)
    return null
  }
})

See here for more info.

I don't know of a way to mirror the Cypress logs to the console directly, but this is at least a workable alternative.

Upvotes: 115

Related Questions