Cypress选择器失效：无法定位侧边栏Projects菜单

尝试点击侧边栏的"Projects"菜单多次失败，报错信息：
Timed out retrying after 4000ms: Expected to find element: never found

目标元素代码：

<li class="ant-menu-item menu-item" role="menuitem" tabindex="-1" data-menu-id="rc-menu-uuid-17523-1-/projects"
    style="padding-left: 24px">
    <span role="img" aria-label="project" class="anticon anticon-project ant-menu-item-icon"><svg
            viewBox="64 64 896 896" focusable="false" data-icon="project" width="1em" height="1em" fill="currentColor"
            aria-hidden="true">
            <path
                d="M280 752h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8zm192-280h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v184c0 4.4 3.6 8 8 8zm192 72h80c4.4 0 8-3.6 8-8V280c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8zm216-432H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z">
            </path>
        </svg></span><span class="ant-menu-title-content">Projects</span>
</li>

已尝试的选择器：

cy.get(
  '[data-menu-id="rc-menu-uuid-25600-1-/projects"] > .ant-menu-title-content'
).click()
cy.get('[data-menu-id="rc-menu-uuid-37316-1-/projects"]')
cy.contains('Projects').click()
cy.xpath('//*[@id="master"]/section/aside/div/ul/li[5]').click()

解决方案 #

• 避开动态属性：data-menu-id里的uuid是动态生成的，每次刷新都会变化，改用属性包含匹配，锁定固定的/projects部分：

  cy.get('[data-menu-id*="/projects"]').click()
  

• 精准定位contains：直接用contains可能匹配到页面其他地方的相同文本，限定菜单上下文，同时确保元素在视口内：

  cy.get('.ant-menu').contains('Projects').scrollIntoView().click()
  

• 替换不稳定的Xpath：不要依赖固定的列表索引（比如li[5]），改用文本或属性匹配：

  cy.xpath('//span[text()="Projects"]/parent::li').click()
  

• 确保元素可交互：如果元素已加载但不可点击，添加状态校验或强制点击（强制点击仅作为临时方案）：

  cy.get('[data-menu-id*="/projects"]').should('be.visible').should('be.enabled').click()
  // 或
  cy.get('[data-menu-id*="/projects"]').click({force: true})
  

• 检查特殊场景：如果侧边栏在iframe或shadow DOM中，需要先进入对应环境再查找元素：

  // iframe场景
  cy.iframe('#target-iframe').find('[data-menu-id*="/projects"]').click()
  // shadow DOM场景
  cy.get('#shadow-host').shadow().find('[data-menu-id*="/projects"]').click()
  

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