New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ability to console.log output from test files to stdout when running via cypress run
#3199
Comments
Hey @fr0, could you give an example of the exact code you are running and where you wrote the code so I can see what you mean? Thanks! |
I was having trouble with a case where my test was failing under electron (timing out) and working fine under chrome. I was trying to use function setup() {
cy.wrap(app.clearDatabase()).then(() => console.log('got to 1'));
cy.wrap(app.makeDatabase()).then(() => console.log('got to 2'));
}
beforeEach(() => {
setup();
cy.visit('/');
}); |
as a hacky partial workaround for debugging index.js setup and some other situations, you can throw an error instead of using console.log. Cypress will catch the error and render it within the test runner GUI, not on the console. Eg, in index.js: Allows me to deduce that the environment variable is not being set properly (as opposed to being set properly and later mutated or inaccessible within some specific context): |
If However I think there's an alternative solution I'd prefer. Could I propose that processing While the documentation indicates that Indeed, at least one |
Hey Everyone! I found a solution to get console logs( log, warn, info, error ) from your app into cypress output! My team has been having problems where our cypress tests run fine locally but inside of our continuous integration tool, it fails. Without our apps I added this code to my
I added this functionality to cypress event This will only be useful when calling // store logs
let logs = '';
Cypress.on('window:before:load', (window) => {
// Get your apps iframe by id. Ours is called "Your App: 'cypress'". If yours is different
// just replace with your apps iframe id
const docIframe = window.parent.document.getElementById("Your App: 'cypress'");
// Get the window object inside of the iframe
const appWindow = docIframe.contentWindow;
// This is where I overwrite all of the console methods.
['log', 'info', 'error', 'warn', 'debug'].forEach((consoleProperty) => {
appWindow.console[consoleProperty] = function (...args) {
/*
* The args parameter will be all of the values passed as arguments to
* the console method. ( If your not using es6 then you can use `arguments`)
* Example:
* If your app uses does `console.log('argument1', 'arument2');`
* Then args will be `[ 'argument1', 'arument2' ]`
*/
// Save everything passed into a variable or any other solution
// you make to keep track of the logs
logs += args.join(' ') + '\n';
};
});
});
// Cypress doesn't have a each test event
// so I'm using mochas events to clear log state after every test.
Cypress.mocha.getRunner().on('test', () => {
// Every test reset your logs to be empty
// This will make sure only logs from that test suite will be logged if a error happens
logs = '';
});
// On a cypress fail. I add the console logs, from the start of test or after the last test fail to the
// current fail, to the end of the error.stack property.
Cypress.on('fail', (error) => {
error.stack += '\nConsole Logs:\n========================';
error.stack += logs;
// clear logs after fail so we dont see duplicate logs
logs = '';
// still need to throw the error so tests wont be marked as a pass
throw error;
}); Now in the terminal( local ) or in cypress dashboard in the output. you will see something like this. I made a error on purpose trying to get some random element
Want to get console.log = function(...args){
// add args to our log variable like my first example
logs += args.join(' ') + '\n';
} Cypress.Commands.overwrite('log', (origninalFn, ...args) => {
// add args to our log variable like my first example
logs += args.join(' ') + '\n';
originalFn(...args);
}) |
Awesome @marcellino-ornelas, you may want to consider making this into a Cypress plugin for others to more easily use. |
@jennifer-shehane I tried initially to make this into a plugin but I couldn't get it to work. I also couldn't debug. I couldn't see any console logs or anything. also, I need to modify the actual window object and since plugins run in a node environment. I don't think this would work? on('window:before:load', () => {
console.log(/*...*/) // didnt log anything for me
}) |
Hi, so here is our solution for the problem: Cypress.on('window:before:load', (win) => {
Cypress.log({
name: 'console.log',
message: 'wrap on console.log',
});
// pass through cypress log so we can see log inside command execution order
win.console.log = (...args) => {
Cypress.log({
name: 'console.log',
message: args,
});
};
});
Cypress.on('log:added', (options) => {
if (options.instrument === 'command') {
// eslint-disable-next-line no-console
console.log(
`${(options.displayName || options.name || '').toUpperCase()} ${
options.message
}`,
);
}
}); You need to set env variable to see log in cypress heedless mode:
You can put it in your support file. |
There is also a plugin for Cypress written by @flotwig that logs console output to the terminal here: https://github.com/flotwig/cypress-log-to-output |
I did it this way: Cypress.Commands.overwrite('log', (subject, message) => cy.task('log', message)); Add task command to plugins: module.exports = on => {
on('task', {
log (message) {
console.log(message);
return null
}
});
}; It will put all |
You're a lifesaver man this was driving me mad. There really should be like a cy.nodeLog() or cy.log({options: 'node'}) or something: debugging CI is such a painful thing. |
Overwriting log function, so logs would be visible in headless output instead of Chromium browser: cypress-io/cypress#3199 Using Cypress environments parameters to be able to test on both: GitHub Workflows (CI) and locally (outside of container). Assuming locally cypress is installed globally (yarn global add cypress).
So it would be clear, that all parts are working correctly, leaving more time to Code review. Adding screenshots and debugging intermediate results, so it would be faster to evaluate and/or fix issues. Using Cypress as one of Headless browser based test framework. Cypress is running browser as a separate process, so it was needed for custom debug function to see intermediate results in GitHub actions as well. Using e2e-tests.sh to reach docker network used by docker-compose.yml. Initial idea was to use GitHub Checks Annotations, but Cypress already formats output with colors. So using just different indentation. Video recording disabled to not abuse GitHub – it already does tremendous job. Using GitHub Action "if: always()" to store screenshots for both successful builds and errors. Documentation: * https://www.cypress.io/ * cypress-io/cypress#3199 * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/development-tools-for-github-actions#set-a-warning-message-warning * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/contexts-and-expression-syntax-for-github-actions#job-status-check-functions
So it would be clear, that all parts are working correctly, leaving more time to Code review. Adding screenshots and debugging intermediate results, so it would be faster to evaluate and/or fix issues. Using Cypress as one of Headless browser based test framework. Cypress is running browser as a separate process, so it was needed for custom debug function to see intermediate results in GitHub actions as well. Using e2e-tests.sh to reach docker network used by docker-compose.yml. Initial idea was to use GitHub Checks Annotations, but Cypress already formats output with colors. So using just different indentation. Video recording disabled to not abuse GitHub – it already does tremendous job. Using GitHub Action "if: always()" to store screenshots for both successful builds and errors. Documentation: * https://www.cypress.io/ * cypress-io/cypress#3199 * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/development-tools-for-github-actions#set-a-warning-message-warning * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/contexts-and-expression-syntax-for-github-actions#job-status-check-functions
So it would be clear, that all parts are working correctly, leaving more time to Code review. Adding screenshots and debugging intermediate results, so it would be faster to evaluate and/or fix issues. Using Cypress as one of Headless browser based test framework. Cypress is running browser as a separate process, so it was needed for custom debug function to see intermediate results in GitHub actions as well. Using e2e-tests.sh to reach docker network used by docker-compose.yml. Initial idea was to use GitHub Checks Annotations, but Cypress already formats output with colors. So using just different indentation. Video recording disabled to not abuse GitHub – it already does tremendous job. Using GitHub Action "if: always()" to store screenshots for both successful builds and errors. Documentation: * https://www.cypress.io/ * cypress-io/cypress#3199 * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/development-tools-for-github-actions#set-a-warning-message-warning * https://help.github.com/en/actions/automating-your-workflow-with-github-actions/contexts-and-expression-syntax-for-github-actions#job-status-check-functions
I am using console.table instead of console.log and throw error for me saying console.table is not a function @anton-aurea |
Based on previous comments and other npm packages that did not satisfy my needs I have combined togheter this package https://github.com/archfz/cypress-terminal-report . It logs cypress commands and console.warn+console.error to terminal in a pretty format. |
@marcellino-ornelas you saved my a**, thanks for sharing |
* Remove Member - connect modal to real data * Start logic... * Update proposals and implement 1st draft of member removal. * RemoveMember modal - better layout * Finish member removal - when isn't a proposal * Add new icons * Proposals - update remove member layout * Try to make this thing work without breaking * fix file path * Address review (partially) * tests - pseudo code * Make this work even better * Write tests to remove member * Fix typos * Solve Circular dependency problem * Remove IS_CONSTRUCTOR - Closes #845 * Changes based on review * Changes based on code review * Address UI changes based on @mmbotelho review * More changes based on last review * Changes based on greg's review * Improve cypress tests * fix typos on comments * Add app logs to Cypress output in case a test fails cypress-io/cypress#3199 (comment) * Force a test to fail to see if it works * Make tests pass again * Make Cypress logs more readable. * Better error handling on proposal * Adapt RULE_DISAGREEMENT threashold for remove member * Byscotting proposal rule threshold
@anton-aurea awesome solution, thanks man! |
That's great, but what I could really use is the ability for my plugin to log to the browser console. |
@alexagranov7 console.log/console.error etc. work in the browser, what do you mean? |
I'm using @archfz 's package cypress-terminal-report which helps a lot when logging within test case - great job! However on our CI/CD runner (console output only; by console I mean ... console, not Problem here is that in order to hook on before/after events, I have to use global event handler Is there any way how to achieve this? (If not, I would dare to remove "existing workaround" tag from this issue, @jennifer-shehane) |
cypress run
thank you very much @anton-aurea that's the best solution even after 2 years. That's really helpful and it's possible to see those logs in Docker as well. |
Recently, I am trying to generate log in CI but unable to do so. Added this code, still does not work in CI. Please find below steps which I have followed. It would be great if you let me know whether this can be used in CI and also steps are right or not. Added below line under support/index.js Created a index.js file inside plugins folder and pasted below code |
The approach provided in #3199 (comment) doesn’t seem to work (anymore?). I have the following setup: // cypress/support/commands/index.ts
Cypress.Commands.overwrite('log', function (_subject, message) {
cy.task('log', message)
}) // cypress/cypress.config.ts
import { defineConfig } from 'cypress'
export default defineConfig({
e2e: {
async setupNodeEvents(on, config) {
on('task', {
log(message) {
console.log(message)
return null
},
})
return config
},
},
}) But a I have to say this is immensely frustrating. How am I supposed to understand the failure state of my test without being able to log? I should really just be able to write |
Thanks for the solution provided, this is a life safer! export default defineConfig({
e2e: {
// Configure your E2E tests here
specPattern: "cypress/e2e/**/*.{cy,spec}.{js,ts}",
setupNodeEvents(on, config) {
on('task', {
log (message) {
console.log(message);
return null
}
});
},
},
}) And add this to your cypress/support/commands.ts file: Cypress.Commands.overwrite('log', (subject, message) => cy.task('log', message)); and use |
Current behavior:
If a test uses
console.log
to print output, it doesn't show up when running from the Cypress Module API (cypress.run
).I also tried
cy.log
and this didn't work either.Desired behavior:
Redirect
console.log
to print to the node console?Versions
3.1.4
The text was updated successfully, but these errors were encountered: