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

[vpenyazkov]

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]

@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]

@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]

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

[dmaklygin]

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