Cypress点击无href属性Angular元素后URL不变 无法定位新页面元素

这是Angular单页应用（SPA）的自定义路由行为：你点击的label元素没有原生href属性，是绑定了Angular的(click)事件触发内部路由跳转，该路由配置开启了skipLocationChange参数，所以跳转时不会更新浏览器地址栏URL、不会触发页面重载，仅替换当前页面的DOM节点内容实现视图更新。

Cypress默认会自动等待DOM元素渲染，但该场景不会触发URL变更，你之前基于URL变更判断跳转完成的逻辑会失效，可按以下方案处理：

• 取消基于URL的跳转断言，改用新页面独有元素作为跳转完成的判断标准，先等待旧页面独有元素消失，再查询新元素：

  // 点击跳转元素
  cy.get('label:contains("NavigateToNextPage")').click()
  // 等待旧页面元素卸载
  cy.get('旧页面独有元素选择器').should('not.exist')
  

• 延长元素查询的超时时间，适配Angular变更检测的渲染耗时，默认超时是4秒，可根据实际场景调整：

  // 最长等待10秒查询目标元素
  cy.get('新页面目标元素选择器', { timeout: 10000 }).should('be.visible')
  

• 如果Angular组件开启了Shadow DOM，需要开启Shadow DOM查询权限：
  全局配置可在cypress.config.js中添加：

  module.exports = defineConfig({
    e2e: {
      includeShadowDom: true
    }
  })
  

  单次查询临时开启可直接加参数：

  cy.get('目标元素选择器', { includeShadowDom: true })
  

• 如果页面跳转过程有加载动画，可先等待加载状态结束再查询元素：

  cy.get('.全局加载动画选择器').should('not.exist')
  

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