Cypress测试中的异步行为与跨页面状态管理

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';
let count = 0; // 同步变量初始化

cy.get(MATCHING_MESSAGE) // Cypress命令，加入队列
  .invoke('text') // Cypress命令，加入队列
  .then((text) => { // 回调函数，在前面Cypress命令执行完成后异步执行
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop(); // 此时count被赋值
    console.log({count1: count}); // 可能会晚于下面的log输出
  });

// 假设这里会触发页面跳转或刷新

console.log({count2: count}); // 同步JavaScript代码，立即执行
if (count > 0) {
  // input count
} else {
  // input a min number like 5
}

log: count2: 0 // 先输出，因为此时异步操作尚未完成，count仍为初始值0
log: count1: 3234 // 后输出，因为这是异步回调中执行的

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

let count = null; // 建议初始化为null，以便区分未赋值和0

// 此Cypress命令块会加入队列，并在队列运行时执行
cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop();
    console.log({count1: count});
  });

// 假设这里会触发页面跳转或刷新

// 使用cy.then()将后续逻辑也加入Cypress命令队列
cy.then(() => {
  // 此代码块会在cy.then()之前的Cypress命令（包括获取count值）执行完毕后运行
  console.log({count2: count});

  // 注意：从DOM中提取的数字通常是字符串，进行数值比较前需要转换为整数
  if (parseInt(count) > 0) {
    // 执行使用count值的操作，例如输入到另一个输入框
    // cy.get('input[data-cy=targetInput]').type(count);
    console.log(`输入数字: ${count}`);
  } else {
    // cy.get('input[data-cy=targetInput]').type('5');
    console.log('输入默认最小值: 5');
  }
});

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';

cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    const extractedCount = text.match(pattern).pop();
    console.log({count1: extractedCount});
    Cypress.env('extractedCount', extractedCount); // 将值保存到Cypress环境变量中
  });

// 假设这里会触发页面跳转或刷新，导致局部变量丢失

cy.then(() => {
  // 从Cypress环境变量中恢复值
  const count = Cypress.env('extractedCount');

  console.log({count2: count});

  if (parseInt(count) > 0) {
    // 执行使用count值的操作
    // cy.get('input[data-cy=targetInput]').type(count);
    console.log(`输入数字: ${count}`);
  } else {
    // cy.get('input[data-cy=targetInput]').type('5');
    console.log('输入默认最小值: 5');
  }
});