如何在Cypress中点击不可见元素？菜单选项点击报错求助

问题详情 #

尝试点击操作菜单选项时，Cypress抛出以下错误：

Timed out retrying after 4050ms: cy.click() failed because this element is not visible:
<div id="pay-off-holiday-option" class="ng-star-inserted">...</div>
This element <div#pay-off-holiday-option.ng-star-inserted> is not visible because its parent <div#ngx_poppperjs_63.ngxp__container.ngxp__animation.popper-actions> has CSS property: display: none
Fix this problem, or use {force: true} to disable error checking.

已尝试在cy.click()中添加{force: true}参数，但菜单仅出现异常移动，并未成功点击目标元素。

DOM结构截图：

解决方案 #

• 先触发菜单显示再点击：菜单父容器默认隐藏，需先通过交互让菜单展开，再定位目标元素点击

  // 替换为实际的菜单触发按钮选择器
  cy.get('[data-testid="menu-trigger"]').click()
  // 等待菜单容器变为可见
  cy.get('#ngx_poppperjs_63').should('be.visible')
  // 点击目标选项
  cy.get('#pay-off-holiday-option').click()
  

• 强制修改父元素CSS属性：直接修改父元素的display属性使其可见，再执行点击操作

  cy.get('#ngx_poppperjs_63').invoke('css', 'display', 'block')
  cy.get('#pay-off-holiday-option').click()
  

• 结合文本定位并处理动画延迟：若目标元素有明确文本，可通过文本定位，同时考虑菜单过渡动画，延长等待时间

  cy.get('[data-testid="menu-trigger"]').click()
  // 延长超时时间，确保元素完全渲染可见
  cy.contains('#ngx_poppperjs_63', '带薪休假结算').click({timeout: 10000})
  

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