cypress
cypress copied to clipboard
cypress-io
Cypress sets :focus and :focus-visible after .click()
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
@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.
@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.
I can't think of anythign at the moment other that switching to using the plugin listed in my previous comment.
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.
