Angular升级后Cypress测试报错：元素被遮挡（实际未遮挡）

Angular框架升级后，我的Cypress测试开始失败，报错提示待点击元素被其他元素遮挡，但实际该元素并未被遮挡。

错误截图：

DOM截图：

当前使用以下函数选择下拉选项：

selectOptionByOptionValue(formField, valueToFind) {

        formField.then(($el) => {
            if ($el.attr('aria-owns') !== undefined) {
                console.log('use aria-owns');
                formField
                    .invoke('attr', 'aria-owns')
                    .then(id => {
                        cy.get(`#${id}`)
                            .contains(valueToFind)
                            .click();
                    });
            } else {
                console.log("use aria-control?")
                formField
                    .click()
                    .invoke('attr', 'aria-controls')
                    .then(id => {
                        cy.get(`#${id}`)
                            .contains(valueToFind)
                            .click();
                    });
            }
        })

排查建议 #

• 确保下拉列表完全渲染可见：Angular升级后组件渲染时序可能改变，在定位选项前添加断言cy.get(#${id}).should('be.visible')，确认下拉列表已完全展开并渲染完成，避免因元素未就绪导致的遮挡误判。
• 校验ARIA属性的准确性：升级后Angular组件的aria-owns/aria-controls属性值可能发生变化，在代码中打印获取到的id（如console.log(id)），核对对应的DOM元素是否为目标下拉列表。
• 临时强制点击验证：若确认元素无实际遮挡，可尝试用click({force: true})跳过Cypress的遮挡校验（如cy.contains(valueToFind).click({force: true})），验证是否为Cypress校验逻辑的误报，但不建议长期使用，需找到根本原因。
• 检查CSS层级与样式变化：Angular升级可能引入新的样式规则（如z-index调整、新增透明遮罩元素），使用cy.get('#目标选项').debug()查看元素的实际定位、层级及覆盖情况，排查是否存在视觉不可见的遮挡元素。
• 优化选项定位方式：替换contains为更精准的选择器，比如通过选项的value属性或唯一标识定位（如cy.get(#${id} [data-value="${valueToFind}"])），避免contains匹配到无关元素导致点击错误。
• 验证下拉组件展开状态：在点击选项前，添加断言确认下拉组件处于展开状态，比如formField.should('have.attr', 'aria-expanded', 'true')，确保组件状态符合交互要求。

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