Cypress如何点击页面任意位置关闭下拉菜单等弹出组件

Cypress完全可以实现点击页面任意非特定位置的操作，你之前的写法无效主要是因为元素选择逻辑存在问题，以下是可直接落地的解决方案：

• 方案1：点击body空白坐标
  最通用的方案，直接点击body区域内确定无交互元素的坐标，避免点中下拉选项。示例代码如下：

// 点击body左上角(0,0)位置，force参数跳过Cypress的元素可交互性校验
cy.get('body').click(0, 0, { force: true })
// 如果左上角存在固定导航栏，可自行调整坐标数值，比如点击(10, 100)这类确认无交互元素的位置
// cy.get('body').click(10, 100, { force: true })

该方案可以100%避开下拉菜单的选项区域，不会触发选中逻辑。

• 方案2：触发全局点击事件
  大部分下拉菜单的关闭逻辑是监听document全局点击事件实现的，直接触发document的点击事件即可生效：

cy.document().trigger('click')

如果你的项目中下拉的点击事件监听挂载在body上，也可以换成：

cy.get('body').trigger('click')

• 方案3：触发下拉菜单失焦
  如果上述点击方案都不生效，可以直接让下拉菜单主动失去焦点，大部分下拉组件失焦后会自动关闭：

// 将下拉选择器替换为你项目中实际的下拉菜单元素选择器
cy.get('.your-dropdown-selector').blur()

注意事项 #

你之前尝试的cy.get('body div')写法默认会匹配DOM树中的第一个div元素，大概率刚好命中顶层的下拉菜单，所以点击后会选中选项；root()指向的是Cypress配置的根挂载容器，通常也会被顶层下拉覆盖，所以点击无效。
如果你的下拉菜单做了事件冒泡阻止（调用了event.stopPropagation()），优先使用方案3即可解决问题。

内容的提问来源于stack exchange，提问作者Jonas