Truncate cy.log() in Command Log to 50 lines instead of 1

[pitgrap]

• Closes Do not truncate cy.log() in Command Log #5625

User facing changelog

Messages from cy.log() are now truncated at 50 lines the Command Log instead of the 1 line.

How has the user experience changed?

Before:

After:

Truncates the log to 50 lines and shows ellipsis to indicate truncation.

Clicking to log to console will log full cy.log() content.

PR Tasks

none.

[cypress-bot]

Thanks for the contribution! Below are some guidelines Cypress uses when doing PR reviews.

• Please write [WIP] in the title of your Pull Request if your PR is not ready for review - someone will review your PR as soon as the [WIP] is removed.
• Please familiarize yourself with the PR Review Checklist and feel free to make updates on your PR based on these guidelines.

PR Review Checklist

If any of the following requirements can't be met, leave a comment in the review selecting 'Request changes', otherwise 'Approve'.

User Experience

• The feature/bugfix is self-documenting from within the product.
• The change provides the end user with a way to fix their problem (no dead ends).

Functionality

• The code works and performs its intended function with the correct logic.
• Performance has been factored in (for example, the code cleans up after itself to not cause memory leaks).
• The code guards against edge cases and invalid input and has tests to cover it.

Maintainability

• The code is readable (too many nested 'if's are a bad sign).
• Names used for variables, methods, etc, clearly describe their function.
• The code is easy to understood and there are relevant comments explaining.
• New algorithms are documented in the code with link(s) to external docs (flowcharts, w3c, chrome, firefox).
• There are comments containing link(s) to the addressed issue (in tests and code).

Quality

• The change does not reimplement code.
• There's not a module from the ecosystem that should be used instead.
• There is no redundant or duplicate code.
• There are no irrelevant comments left in the code.
• Tests are testing the code’s intended functionality in the best way possible.

Internal

• The original issue has been tagged with a release in ZenHub.

[CLAassistant]

All committers have signed the CLA.

[brian-mann]

@jennifer-shehane shouldn't there be some kind of upper maximum here? Seems slightly irresponsible to display all of the log message regardless of how long it is.

With this PR, if you shrink the reporter, the text will wrap really far and make the command log pretty unusable at smaller sizes. Could we truncate the log message to a more reasonable point so we avoid that problem?

[pitgrap]

@brian-mann As a cypress test code writer, I would like to have control of the log messages of my own tests. This change does not affect any other message types. Just my own written cy.log(). I don't know why cypress should restrict me as developer? Also the Command Log has a minimum width of 170px.
But if I still couldn't convince you, a simple max-height: 300px; should do it, because the default overflow/text-overflow rules would apply.

[jennifer-shehane]

@pitgrap The restriction would be a very large one, like 2,000 characters. The purpose of restriction would be to prevent the reporter from printing a gigantic log, like if someone accidentally printed a large Object, that may lock up the browser during rendering. Something more than this amount of characters wouldn't even be visible in a single frame of the test runner for review. Users can open a new issue if they need this to be larger and handled in some other way.

I'll update the PR for this.

[pitgrap]

Do you have any updates? Can I do anything to get this PR merged?

[gabbersepp]

Hello, can this PR be merged? Please have a look at this screenshot, taken from one of our testruns:

I have no chance to check if the lcoator and the element in the UI are correct. My assumption is, that the element was replaced dynamically but as I can not see the full locator of the get I have no chance to confirm this.

[jennifer-shehane]

There were changes requested for this PR that were never implemented. Implement the changes and we can move forward.

• Set upper limit for logs display
• Truncate cy.log() in Command Log to 50 lines instead of 1 #5630 (review)

Likely relevant to this work #5762

[gabbersepp]

@jennifer-shehane Thanks for pointing that out.
@pitgrap Can you have a look again? Would be nice!

[pitgrap]

Rebased on develop branch, added the feedback and updated the screenshots.
Used a simple CSS solution for the upper limit based on https://caniuse.com/#feat=css-line-clamp

[jennifer-shehane]

I do not see the line-clamp style have any effect. As can be seen in the image below, the log is printing 50+ lines, not truncating at line 50.

If you are going to truncate, we also need some ellipsis to indicate that the log was truncated otherwise the users will have no way of knowing whether it is the end of the log or truncated.

[pitgrap]

If you are going to truncate, we also need some ellipsis to indicate that the log was truncated otherwise the users will have no way of knowing whether it is the end of the log or truncated.

I agree, and that's what should happen. See my screenshot in the description.

I do not see the line-clamp style have any effect. As can be seen in the image below, the log is printing 50+ lines, not truncating at line 50.

That's weird. I will retest it.

[pitgrap]

Ok, sorry. My new styles has been overwritten by another CSS rule with a "display: block". Now it should be finally fixed and working.

Changes were made to address Chris original comment