多重复元素场景下子元素定位及click()操作失效问题解决

你的问题核心在于：目标span元素被设置了visibility: hidden的父元素遮挡，Cypress遵循真实用户交互逻辑，拒绝执行对不可见元素的点击操作；同时你直接定位子元素的方式不符合页面实际交互设计。

推荐解决方案：点击外层可交互的<a>标签 #

页面中真正的可交互区域是包裹子元素的<a>标签（class为locale-selector-country），这才是用户实际操作时会点击的元素，定位并点击它可直接避开不可见问题：

// 通过包含的文本定位外层a标签
cy.contains('.locale-selector-country', 'Hong Kong').click()

// 或者通过aria属性精准定位
cy.get('a.locale-selector-country[aria-haspopup="true"]').click()

备选方案：强制点击不可见元素（不推荐） #

如果必须直接操作子元素，可使用{force: true}选项跳过Cypress的可见性检查，但这种方式违背真实用户行为，可能导致测试不稳定：

cy.get('.locale-selector-country-heading').contains('Hong Kong').click({force: true})

特殊场景：先让父元素变为可见 #

若父元素需通过hover、点击等交互才会显示，需先触发对应操作让元素可见，再点击目标子元素：

// 触发hover显示父元素
cy.get('.locale-selector-country-wrapper').trigger('mouseover')
// 再点击目标span
cy.get('.locale-selector-country-heading').contains('Hong Kong').click()

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