为何index.html中<title>元素的修改未在Cypress界面中生效？

核心原因 #

• Vue的DOM更新是异步批量执行的，手动打开浏览器时已经等待了异步逻辑执行完成，但Cypress默认断言如果没有匹配到对应重试规则，会提前执行拿到旧的title值
• 错误使用cy.get('title')获取页面标题，该命令默认不会监听title的动态更新，只会拿到页面初始加载时的title内容
• Cucumber步骤时序错位：如果触发title修改的操作（路由跳转、交互动作）还没有执行完成，后续的断言步骤就已经运行，会出现断言失败
• 标题修改逻辑绑定在Vue路由钩子、组件异步挂载逻辑中时，单页应用异步加载资源的过程中，Cypress没有等到对应逻辑执行完成就触发断言

解决方案 #

• 替换title断言写法：使用Cypress内置的cy.title()命令做断言，该命令自带重试逻辑，会在超时时间内持续校验title值是否符合预期，写法参考：

  // 校验title完全相等
  cy.title().should('eq', '你预期的页面标题')
  // 校验title包含指定内容
  cy.title().should('contain', '预期关键词')
  

• 给断言加前置锚点：在执行title断言前，先确认页面核心元素已经加载完成，保证修改title的逻辑已经执行，比如：

  // 先校验当前页面独有的元素已经渲染可见
  cy.get('.page-home-main').should('be.visible')
  // 再执行title断言
  cy.title().should('eq', '首页标题')
  

• 拉长断言超时时间：如果title修改逻辑有较长的异步延迟，可以自定义断言的超时上限：

  cy.title().should('eq', '预期标题', { timeout: 10000 })
  

• 跨域场景下检查Cypress配置：如果是跨域跳转后修改title的场景，需要开启experimentalSessionAndOrigin配置项，避免Cypress无法获取到新页面的最新title。

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