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

Cypress sets :focus and :focus-visible after .click() #29388

Closed
vpenyazkov opened this issue Apr 23, 2024 · 6 comments
Closed

Cypress sets :focus and :focus-visible after .click() #29388

vpenyazkov opened this issue Apr 23, 2024 · 6 comments
Labels
stale no activity on this issue for a long period topic: cy.click 🖱 type: unexpected behavior User expected result, but got another

Comments

@vpenyazkov
Copy link

vpenyazkov commented Apr 23, 2024

Current behavior

Cypress sets :focus and :focus-visible after .click().

Here are the styles of the button:

outline: red none 3px;

&:focus {
  outline-style: dotted;
}

&:focus-visible {
  outline-width: 10px;
}

when the button with such styles is clicked in Cypress, the outline is visible and has dotted style with 10px size.

Desired behavior

During clicking the button gets only :focus in real browser (Chrome v124)

Test code to reproduce

cy.get('[data-testid=btn]').click()

Cypress Version

13.6.4

Node version

v18.16.1

Operating System

macOS 14.4.1

Debug Logs

No response

Other

No response

@jennifer-shehane jennifer-shehane added the type: unexpected behavior User expected result, but got another label Apr 23, 2024
@jennifer-shehane
Copy link
Member

@vpenyazkov With how Cypress simulates clicks, it does apply both :focus and :focus-visible`. If you want a click that is more realistic to the browser behavior, you could try cypress-real-events to click. We should have closer behavior to a real user, so I'll leave this issue open.

@vpenyazkov
Copy link
Author

vpenyazkov commented Apr 23, 2024

@jennifer-shehane thanks for the details.

Is there something that could prevent :focus-visible to be set by .click()? We observe quite unstable behaviour in tests which compare screenshots on CI -- the outline is not displayed on buttons from time to time.

@jennifer-shehane
Copy link
Member

I can't think of anythign at the moment other that switching to using the plugin listed in my previous comment.

@dmaklygin
Copy link

Actually, cypress-real-events also adds :focus-visible pseudo-class to the button.

@cypress-app-bot
Copy link
Collaborator

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label Oct 24, 2024
@cypress-app-bot
Copy link
Collaborator

This issue has been closed due to inactivity.

@cypress-app-bot cypress-app-bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale no activity on this issue for a long period topic: cy.click 🖱 type: unexpected behavior User expected result, but got another
Projects
None yet
Development

No branches or pull requests

4 participants