如何在Cypress中抓取页面元素值执行操作并验证值是否变化

这个需求完全可以直接用Cypress原生API实现，不需要额外编写原生JavaScript的DOM操作逻辑，有两种常用的实现方式：

方式1：使用Cypress别名（推荐） #

这是Cypress官方推荐的异步变量存储方案，完全适配Cypress的命令执行时序，不会出现取值时序错误：

// 1. 抓取初始元素文本，存储为别名
cy.get('目标元素选择器').invoke('text').as('originalText')

// 2. 执行你的页面操作（示例为点击按钮，可替换为你需要的任意操作）
cy.get('#submit-btn').click()

// 3. 操作完成后重新获取元素文本，和初始值做对比校验
cy.get('目标元素选择器').invoke('text').then(newText => {
  cy.get('@originalText').then(originalText => {
    // 校验值已发生变化，如果你需要校验变化为特定值可以修改断言规则
    expect(newText).to.not.equal(originalText)
  })
})

方式2：使用闭包变量存储 #

如果你更习惯普通JavaScript的变量使用逻辑，也可以用闭包变量存储初始值：

// 定义闭包变量存储初始值
let originalText

// 1. 抓取初始值赋值给变量
cy.get('目标元素选择器').invoke('text').then(text => {
  originalText = text
})

// 2. 执行页面操作
cy.get('#submit-btn').click()

// 3. 重新获取值做对比
cy.get('目标元素选择器').invoke('text').should('not.equal', originalText)

注意事项 #

不要尝试用同步的方式直接获取Cypress命令的返回值，所有Cypress命令都是异步入队执行的，必须在then回调中处理取值逻辑，否则会拿到未赋值的空值。

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