Skip to content
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

Stub / spy counter badge is cut off #4822

bahmutov opened this issue Jul 25, 2019 · 2 comments


Copy link

commented Jul 25, 2019

Cypress 3.4.0 with Electron or Chrome

Recipe in

Run the spec file and after it is finished click on the button "Open new window" inside the application frame (like a user). The cy.stub counter keeps incrementing - and the badge appears, but the badge gets cut off on the left.

Screen Shot 2019-07-25 at 9 25 51 AM

Screen Shot 2019-07-25 at 9 26 23 AM

Relevant markup

Screen Shot 2019-07-25 at 9 29 42 AM

Relevant files:

  • packages/reporter/src/commands/command.jsx
  • packages/reporter/src/commands/commands.scss

This comment has been minimized.

Copy link

commented Jul 31, 2019

Hello @bahmutov - I think I know how to address this. It would seem that the counter is not so much being 'cut off' as the border-radius css hasn't been defined to create a symmetrical pill shape around the counter.

Specifically, I would propose changing the css to

.num-duplicates.has-alias {
      border-radius: 10px 10px 10px 10px;
      line-height: 2;
      padding: 3px 5px 3px 5px;

I believe this change would give the desired 'not cut-off look' you are seeking. Would you like me to contribute this change?


This comment has been minimized.

Copy link

commented Aug 1, 2019

hhudson added a commit to hhudson/cypress that referenced this issue Aug 2, 2019

Proposal to eliminate the 'cut-off' appearance of the counter in favor of more of a 'pillbox' look
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
You can’t perform that action at this time.