Cypress测试报错：期望h1包含@selectedText，如何修复？

问题原因 #

你的测试报错expected <h1.text-h4.text-weight-semibold.q-mb-sm> to contain @selectedText，核心问题有两个：

1. 直接把@selectedText当作字符串传给should断言，Cypress会将其视为普通文本，而非引用之前定义的别名。
2. 操作顺序错误：点击元素后页面跳转，原DOM元素被销毁，此时再调用invoke('text')已经无法获取到目标文本。

修复方案 #

1. 调整操作顺序：先取文本再点击 #

点击元素会触发页面跳转，必须在跳转前提取目标元素的文本并保存为别名，再执行点击操作。

2. 正确引用别名 #

断言时要通过函数形式访问别名的值，不能直接写字符串@selectedText。注意：it块不能用箭头函数，否则无法通过this访问别名。

修复后的完整代码 #

describe('template spec', () => {
  it('验证目标元素文本与新页面h1文本一致', function() { // 用普通函数，不要用箭头函数
    cy.visit('https://gxpbox.org/')
    cy.get("input[placeholder=\"Where are you going?\"]").type("Dubai")
    cy.get('[class="q-item q-item-type row no-wrap q-item--clickable q-link cursor-pointer q-focusable q-hoverable items-center"]')
      .contains('Dubai, United Arab Emirates')
      .click()
    cy.get("button[type=\"submit\"]").click();
    
    cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]')
      .should('have.length.gt', 19)
      .its('length')
      .then((n) => Cypress._.random(0, n - 1))
      .then((k) => {
        cy.log(`picked random index ${k}`)
        // 先获取文本存为别名，再执行点击
        cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]').eq(k)
          .invoke('text')
          .as('selectedText')
          .then(() => {
            cy.get('[class="ellipsis-2-lines text-lg text-weight-semibold"]').eq(k).click()
          })
      })
    
    // 方式一：通过this访问别名（it必须是普通函数）
    cy.get('h1').should(($h1) => {
      expect($h1.text()).to.contain(this.selectedText.trim()) // trim()可去除文本首尾空格，避免匹配失败
    })

    // 方式二：通过.get('@selectedText')获取值，无需限制it函数类型
    // cy.get('@selectedText').then(selectedText => {
    //   cy.get('h1').should('contain', selectedText.trim())
    // })
  })
})

额外提示 #

• 加上.trim()处理文本，能避免因元素文本首尾存在空格导致的匹配失败。
• 如果点击后打开的是新标签页，还需添加标签页切换逻辑，从当前流程看应为单页跳转，无需额外处理。

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