如何在Cypress测试中保存元素文本并进行跨时区时间对比？

需求：获取网页上显示的时间文本（对应元素如下），修改网站时区后，再次获取该元素文本并对比变化是否正确。

<strong class="date-time ng-tns-c226-30 ng-star-inserted">Dec 14, 2022, 5:07:08 PM</strong>

尝试了两种方案均失败：

• 方案1无法正确读取保存的文本值进行对比
• 方案2中外部cy.log输出undefined

尝试方案1代码 #

cy.get('.date-time').invoke("text").as("oldtext")
cy.log("saved text: " + this.oldtext)

//Do some changes

cy.get('.date-time').invoke("text").as("newtext")
cy.log("saved text: " + this.newtext)

//Do comparison with the two strings

尝试方案2代码 #

let currentTime;
cy.get('.date-time') // select the element that displays the time
   .then(element => {
       currentTime = element.text()// get the text content of the element
       cy.log("inside: " + element.text()) // log the time inside the callback function
   });
cy.log("outside: " + currentTime)

Cypress的命令是异步队列执行的，同步代码会在Cypress命令完成前先执行，导致变量还未被赋值：

1. 方案1中，cy.log("saved text: " + this.oldtext)是同步代码，此时as("oldtext")的异步命令还未完成，this.oldtext没有值。
2. 方案2中，外部的cy.log在cy.get的回调函数之前执行，currentTime还未被赋值，所以输出undefined。

要在Cypress的异步命令链中访问变量，必须用then回调来保证执行顺序，以下是两种可行的写法：

写法1：使用别名+链式then #

// 保存旧时间
cy.get('.date-time').invoke('text').as('oldTime')

// 在then中访问别名，保证异步顺序
cy.get('@oldTime').then(oldTime => {
  cy.log(`旧时间：${oldTime}`)
  
  // 执行时区修改操作
  // ...

  // 获取新时间并对比
  cy.get('.date-time').invoke('text').then(newTime => {
    cy.log(`新时间：${newTime}`)
    // 基础对比：验证时间已变化
    expect(newTime).not.to.equal(oldTime)
    
    // 进阶验证：解析时间对象，验证时区变化后的时间逻辑正确
    const oldDate = new Date(oldTime)
    const newDate = new Date(newTime)
    // 例如：时区切换+8小时，预期时间差为8*3600*1000毫秒
    // expect(newDate.getTime() - oldDate.getTime()).to.equal(8 * 3600 * 1000)
  })
})

写法2：使用闭包变量 #

let oldTime;

// 先获取旧时间并赋值到闭包变量
cy.get('.date-time').invoke('text').then(text => {
  oldTime = text
  cy.log(`旧时间：${oldTime}`)
  
  // 执行时区修改操作
  // ...

  // 获取新时间并对比
  cy.get('.date-time').invoke('text').then(newTime => {
    cy.log(`新时间：${newTime}`)
    expect(newTime).not.to.equal(oldTime)
    
    // 可选：解析时间做精准验证
    const oldDate = new Date(oldTime)
    const newDate = new Date(newTime)
    // 根据你的时区修改逻辑添加验证
  })
})

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