Click somewhere on page to close items such as drop-down

Question

Is it possible to click somewhere unspecific on a page? I have the issue that a drop down becomes top level in the dom and all other elements are not visible anymore for cypress. A user probably simply clicks somewhere in order to close the dropdown. However, I fail with cypress. I can only click on the dropdown-element itself and since there are multiple items in the dropdown I have to even select one (not wanted)

I need something for cypress to click on something unspecific like: root().click or cy.get('body div').click

These 2 are not working not even with force: true.

Answer 1

I had a similar issue and I used coordinates according to the Syntax

.click(x, y, options)

So you should be able to get the body and click on position x = 50, y = 50 or some other position outside the dropdown menu

cy.get('body').click(50, 50, { force: true })

If this does not work, you can try negative coordinates

cy.get('{{dropdown-menu-name}}').click(-50, 0, { force: true})

If this still does not work use .mousemove()

 cy.get("{{dropdown-menu-name")
.trigger("mousemove", 50, 50)
.trigger("mousedown", {which : 1})
.trigger("mouseup", {which : 1})

but that seems excessive

{edit} 50 is the number of pixels to move. That is just an example. of course. Pick a number of pixels what works for your project.