Testing hover styles with @media (hover: hover)

[Turi S.]

Hi all,

I am using Capybara with Selenium. I have some hover styles that need to be applied conditionally based on whether the device supports hovering, and am trying to use the new `hover` media query (more info here: https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/). It looks like:

@media (hover: hover) {

  .my-el:hover { /* hover styles here */ }

}

I am trying to test this by triggering a hover with Capybara on the element in question, and then asserting that certain child elements become visible. Anyways, this works fine running the test on my own computer, but in my CI environment, the hover styles are not being applied (I assume because the device is registering as not having hover capability).

Does anyone know if there is a way to configure Capybara/Selenium to always behave as if there is a mouse connected (at least for the purposes of triggering the MQ), even in a virtual machine context? Or would this perhaps have to be solved via configuration at the VM level?

Thanks in advance!

Turi