Cypress中如何将输入值存为别名并比较前后输入值？

问题根源 #

循环中使用as存储别名时，受Cypress命令的异步特性影响，同步循环会先执行完毕，而异步的cy.get(...).as(...)会在后续执行，导致后续获取别名时无法正确对应每个输入框的初始值；同时多别名管理也增加了出错概率。

修正方案 #

将前后输入框的值分别存入数组，再遍历数组进行比较，彻底避免别名带来的异步时序问题：

1. 完整修正代码 #

// 存储初始输入框值
let previousValues = [];
cy.get('.input').each(($input) => {
  previousValues.push($input.val());
}).then(() => {
  // 选择下拉菜单修改数据
  cy.get('.select').select(1);

  // 存储修改后的输入框值
  let currentValues = [];
  cy.get('.input').each(($input) => {
    currentValues.push($input.val());
  }).then(() => {
    // 遍历比较前后值
    for (let i = 0; i < previousValues.length; i++) {
      expect(currentValues[i]).to.not.eq(previousValues[i]);
    }
  });
});

2. 封装可复用的比较方法（可选） #

如果需要复用比较逻辑，可以将比较逻辑封装成方法，直接传入前后值数组：

verifyingInputChanging(prevValues, currValues) {
  for (let i = 0; i < prevValues.length; i++) {
    expect(currValues[i]).to.not.eq(prevValues[i]);
  }
}

调用方式：

let previousValues = [];
cy.get('.input').each(($input) => {
  previousValues.push($input.val());
}).then(() => {
  cy.get('.select').select(1);
  
  let currentValues = [];
  cy.get('.input').each(($input) => {
    currentValues.push($input.val());
  }).then(() => {
    instanceConf.verifyingInputChanging(previousValues, currentValues);
  });
});

原代码失败的核心原因 #

• 原循环中as是在then回调内执行的，同步循环会先完成5次迭代，而异步的cy.get(...).as(...)会在后续依次执行，导致@previous0到@previous4的别名实际存储的值出现顺序混乱或覆盖。
• 使用each命令遍历输入框，能确保按顺序捕获每个输入框的值并存入数组，且通过then回调确保所有值捕获完成后再执行后续操作，彻底规避异步时序问题。

内容的提问来源于stack exchange，提问作者Sorbon I.