Tailwind hidden class but change on group-hover

Current behavior

I have a child element that has a group-hover class. Which basically, it detect if the parent is hovered, then the child should change the value based on what we put.

In this child element, my manual class is “hidden” , but change /overwritten when the parent is on hover.

But in cypress, it always detect this tailwind hidden class

This element `<div>` is not visible because its parent `<div.hidden.group-hover:flex.absolute.w-11/12.bottom-20.left-0.right-0.mx-auto.p-2.bg-white.border.rounded-xl.shadow-sm.space-x-2>` has CSS property: `display: none`

Desired behavior

If the value display is overwritten then we should be able to perform action such as click on this element

Test code to reproduce

Element

 <div
            id={`wrapper-pdf-page-1`}
            className="relative group">
  ...
<div data-cy='removeBtn' className="hidden group-hover:flex">
             REMOVE
</div>

</div>

Test

 // hover on a page
    it('should hover on a page', () => {
        cy.get('#wrapper-pdf-page-1').trigger('onmouseover')
        cy.get('#wrapper-pdf-page-1').trigger('mouseenter')
        cy.get('[data-cy="removeBtn"]').first().click()

        // check '#wrapper-pdf-page-1' removed
        cy.get('#wrapper-pdf-page-1').should('not.exist')
    })

Cypress Version

^10.11.0

Node version

16

Operating System

macoS

Debug Logs

No response

Other

No response

[hilmanski]

thanks @marktnoonan will explore your answer

[marktnoonan]

Hi, I’m curious about this line:

cy.get('#wrapper-pdf-page-1').trigger('onmouseover')

Shouldn’t that be trigger('mouseover')?

I think the testing strategy here will depend on how tailwind implements the group hover, if it’s a CSS-only solution depending on :hover CSS state, triggering the JS mouse events may not create the actual hover state that Tailwind is looking for. If that’s the source of the problem, common workaround is cy.realHover using https://github.com/dmtrKovalenko/cypress-real-events.