Components testing - screenshot causes screen to move causing undesired possible mouse over and other artifacts

Current behavior

To demonstrate this I created a simple component testing where the component will have a different background color on mouse hover via CSS.

The recorded gif bellow illustrate the issue. After I press the “Run all tests” button then the rendering area of the component will be moved to be under the mouse and the component will receive the hover style of the css before taking the screenshot.

Resulting in the following diff generated by the snapshot plugin (left is expected / right is actual

In some other cases it will capture the cypress ui’s tooltip:

Desired behavior

Screenshot to no receive mouse hover or cypress elements

Test code to reproduce

Clone this repository https://gitlab.com/souf/react-webpack-playground/-/tree/cypress-screenshot-blinking using branch cypress-screenshot-blinking.

• Run yarn install and yarn cypress:open
• open the component testing specs “App”
• press the button to run again all test, or to reload the page while the mouse is hover the spot where the dom element will be when “blinking”.
• see screenshot in cypress/screenshots

Cypress Version

10.6.0

Node version

16.x

Operating System

linux

Debug Logs

nc

Other

It’s a funky one but as bothering as a mosquito 😄

[rachelruderman]

Ohhhhh big derp! @gsouf thank you for the wonderful reproduction repo, your patience and for clarifying! I was on the lookout for the tooltip. I agree, it like you’ve found a buggo. I’ll have this routed to the appropriate team 🙏

Note: I was able to reproduce on MacOS

[gsouf]

@rachelruderman on the video you sent the issue is reproduced with success.

From the video:

The square is green (mouse hover). It is expected to be red (no mouse hover).

Does that make sense ?