Question: Simulate hover, mouseover, mouseenter for dropdown menu activation

[annjulyleon]

I'm trying to make a screenshot for the page with dropdown menu activated. See example here: https://demoqa.com/menu# ( .nav-menu-container #nav li:nth-child(2) :hover element).

I would appreciate any tips and workflow examples.

[simonw]

This looks pretty hard! https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover has a few ideas.

My hunch is that this can't be done for pure CSS :hover effects because it's not a "trusted event" as explained in https://stackoverflow.com/a/17226753/6083

[b-a0]

I was looking at this as well and was hoping that the newer SO answer (with the MouseEvent) would work. Unfortunately not the case.

In my search for workarounds I did find that both puppeteer and playwright seem to be able to force a pseudostate (such as hover), but I don't understand this sufficiently. Also, Playwright does offer a .hover() function, is that in any way usable?

[simonw]

I can't figure this out either - I was hoping this would work but it didn't:

shot-scraper https://github.com/simonw/datasette/issues/2335 --javascript "
document.querySelector('.issue-shorthand').dispatchEvent(new MouseEvent('mouseover', {
    view: window,
    bubbles: true,
    cancelable: true
}));
" --wait 4000 -h 1000

That should have displayed the hover card over the first issue link on https://github.com/simonw/datasette/issues/2335