掌握Cypress异步命令与状态管理：解决测试中的执行顺序问题

const MATCHING_MESSAGE = '[data-cy=matchingMessages]';
let count = 0;

// 这段代码将Cypress命令添加到队列中
cy.get(MATCHING_MESSAGE)
  .invoke('text')
  .then((text) => {
    const pattern = /[0-9]+/g;
    count = text.match(pattern).pop(); // count在此处被赋值
    console.log({count1: count}); // 此时count为正确的值，但执行晚于下面的同步代码
  });

// 模拟跳转到下一页的操作
// cy.visit('/next-page');

// 这段JavaScript代码是同步执行的，会立即运行
console.log({count2: count}); // 此时count仍为初始值0，因为上面的Cypress命令尚未执行
if (count > 0) {
  // 使用count进行操作
} else {
  // 使用默认值
}

log: count2: 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}); // 此时count已获得正确值
  });

// 模拟跳转到下一页的操作
// cy.visit('/next-page');

// 使用cy.then()将后续逻辑也加入Cypress队列
cy.then(() => {
  // 这段代码会在前面的Cypress命令（包括对count的赋值）执行完成后才运行
  console.log({count2: count}); // 此时count将是正确的值

  // 注意：从文本提取的数字通常是字符串，进行数值比较前最好转换
  if (parseInt(count) > 0) {
    // 使用count进行操作，例如：
    // cy.get('input[name="target-field"]').type(count);
  } else {
    // 使用默认值
    // cy.get('input[name="target-field"]').type('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环境中
    Cypress.env('extractedCount', extractedCount);
  });

// 模拟跳转到下一页的操作，这可能导致页面刷新
// cy.visit('/next-page');

cy.then(() => {
  // 从Cypress环境中恢复值
  const count = Cypress.env('extractedCount');
  console.log({count2: count});

  if (parseInt(count) > 0) {
    // 使用count进行操作
    // cy.get('input[name="target-field"]').type(count);
  } else {
    // 使用默认值
    // cy.get('input[name="target-field"]').type('5');
  }
});