How to query focused state without changing it

[diminutivesloop]

I'm trying to create a test for keyboard focus trapping in a modal component and I'm using the cypress-real-events package to simulate tabbing events. However when I try to verify that the expected element is focused after tabbing I run into issues. If I use cy.get(".expected-element-selector").should("be.focused") the test always passes because cy.get() apparently sets focus to the queried element. However if I use cy.focused().contains("expected element text") the test passes and fails as expected but I have to settle for a less precise and stable query than cy.get() would afford me. Is there any other way to query the focused state of an element without changing focus to that element? Seems like there should be otherwise the "be.focused" assertion is essentially meaningless.

[bahmutov]

Hi @diminutivesloop

Under the hood, Cypress uses Chai-jQuery assertions that include match assertion. You can use it to check your element like this

cy.focused().should('match', '.expected-element-selector')

See live example at https://glebbahmutov.com/cypress-examples/6.4.0/commands/misc.html#cy-focused

[diminutivesloop]

So it looks like the underlying issue was that the modal component auto focuses its content after the opening animation completes via the transitionend event and I was able to fix this by calling cy.wait() Any idea why Cypress isn't waiting for this automatically?

[bahmutov]

It is hard to say without a reproducible example. If you can create a minimal reproduction, we would be happy to answer

[diminutivesloop]

Ok. If I have time I may investigate and open an issue if I can determine that Cypress doesn't properly wait on transitionend event handlers.