The width of the timer in the Test Runner is 'jumpy'

[must-git-good]

Current behavior:

Currently, the Cypress GUI has a timer that shows during test progress. The current implementation shows the time out to two decimal places, but drops trailing zeroes. So your timer jumps from 10 to 10.53 to 10.8 to 10.92 and then to 11. (As a crude example). This causes the visual space it takes up on the screen to frantically jump around in size. It's a bit dis-concerting.

Desired behavior:

Any visually cleaner implementation. I suggest just showing exactly to two decimal places at all times on the timer. 10 seconds would then be 10.00 seconds. You could also make other adjustments to the sizing of the element container, etc. to help alleviate this as well, but those feel like half measures.

This implementation would still have the element resize, but only at non-frequent, important breaks ( on the # of digit switches)

Test code to reproduce

Run any test suite that takes over 10 seconds to complete. A specific example is not required, as this is a visual UI improvement that should be noticeable for any long-running test.

Versions

Noticed it enough to annoy me at the current version 3.8.x, so not sure if that element has changed or if that changing element has just finally made me roll my eyes enough to open a ticket.

I'd love other suggestions or feedback on whether this bothers anyone else, as well.

[jennifer-shehane]

Gif of described behavior - note the width of timer elements jumping.

We're open to contributions:

• The 'timer' .tsx file is here: https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/header/stats.tsx#L31:L31
• css is here: https://github.com/cypress-io/cypress/blob/develop/packages/reporter/src/header/header.scss#L90:L90
• Tests can be writing within https://github.com/cypress-io/cypress/blob/develop/packages/reporter/cypress/integration (see other examples of reporter tests within Cypress)

[Manuel-Suarez-Abascal]

@jennifer-shehane @must-git-good I would like to fix this issue. Which solution would you think it'll be the most optimal? Increasing the container's width with CSS or adding or adding two decimals at all times on the timer?

[must-git-good]

Certainly there are a few approaches, so use your best judgement, but my personal preference would just be to show a consistent set of trailing decimals (probably 2?). But resizing the box itself might be complementary to this effort as well.

Anything that keeps the visuals clean and professional!

[jennifer-shehane]

@Manuel-Suarez-Abascal We would love an open PR - even one that is a work in progress is fine. I would probably also prefer the 2 decimals always displaying, but if a css solution ends up being better we wouldn't be opposed to that. Check out our contributing doc and ask us if you get stuck.

[Manuel-Suarez-Abascal]

@Manuel-Suarez-Abascal We would love an open PR - even one that is a work in progress is fine. I would probably also prefer the 2 decimals always displaying, but if a css solution ends up being better we wouldn't be opposed to that. Check out our contributing doc and ask us if you get stuck.

Hi @jennifer-shehane, I'm trying to push my code changes & open a PR.
However, whenever I try to push the changes I get this error message:

I might need some help on how to push my code & open a PR for review! Thanks in advance! 🙂

EDIT:

After some investigation, I realized that I might had git clone the original repo & not the forked one. I'll rewrite during this weekend!

[cypress-bot]

The code for this is done in cypress-io/cypress#6236, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[flotwig]

Released in 4.0.0.