Testcafe: Test doesn't trigger hover with styled components

[nir-welldone]

What is your Test Scenario?

I'm trying to hover an element (which uses styled components) and trigger a hover effect.

What is the Current behavior?

The virtual mouse is hovering the element but no hover effect has triggered.
(The element remains red)

What is the Expected behavior?

The virtual mouse should trigger a hover effect.
(The test should change the element from a red background to a blue background)

What is your web application and your TestCafe test code?

Component File

 const Demo = styled.span`
   width: 100px;
   height: 100px;
   background-color: red;
   &:hover{
      background-color: blue;
   }
`

Test File

const s = Selector("span")
await t.hover(s)

Note: When I extract the styling to a css file the test triggers the hover effect.

Your Environment details:

• testcafe version: 1.1.0
• node.js version: 10.13.0
• command-line arguments: testcafe \"chrome --disable-background-timer-throttling\" e2e/{//,*/,}.e2e.js -S -s e2e/screenshots
• browser name and version: Chrome 74
• platform and version: Windows 10

[srikanthchitla]

Even am looking for same thing. 👍

[miherlosev]

Hi @nir-welldone

Thank you for the provided detail. I've reproduced the problem.

For the team: to create a full example to reproduce, I used this tutorial;

[nmackey]

I'm seeing the same thing. I just switched from using Emotion to Styled-Components and one my E2E tests stopped working b/c of this.

[abnorman23]

Same problem. Is it possible to find out whether the fix?

[alexey-lin]

@abnorman23 , the fix is not available yet and we cannot provide any estimates on this issue. We keep it in mind and will update this thread as soon as the issue is solved.

[stonecrafter]

Same issue :(

[cagrispan]

Same issue here.

[vanBadAsselt]

+1

[TeaBough]

After upgrading to styled-components 5.1.0, everything worked ... before I was using 4.3.2

[AlexSkorkin]

@TeaBough, thank you for sharing your findings with us.

[AlexKamaev]

To the team.
I researched the issue. It is caused by the fact that the styled-components module uses the window.CharacterData.prototype.appendData method to inject styles into the page. testcafe-hammerhead does not override this method, so the element[data-hammerhead-hovered] style is not injected into the page.
I overrode the appendData method in the testcafe-hammerhead module as follows:

            appendData (...args) {
                var textNode = document.createTextNode(args[0]);

                return sandbox._addNodeCore({
                    parentNode: this.parentNode,
                    nativeFn:   nativeMethods.appendChild,
                    checkBody:  true,

                    args: [textNode]
                });
            },

After that, the test behaves as expected.