Cypress 12中字段初始值别名被覆盖，如何恢复原字段值？

问题原因 #

你遇到的问题本质是：直接通过命令链（cy.get().invoke().as()）创建的别名，保存的是命令链的引用而非当时的具体值。当后续修改字段并刷新页面后，DOM元素的属性已更新，再次调用cy.get('@ALIASNAME')会重新执行整个命令链，从而获取到修改后的新值，而非最初存储的初始值。

解决方案 #

核心思路是将初始值静态存储，避免依赖动态的命令链引用，以下两种方案均可解决：

方案一：使用Cypress环境变量存储静态值

将初始值存入Cypress.env()，确保值不会随DOM变化而改变：

function aliasAliasNameValue() {
  cy.get(`div[data-textfield="editField"] input`)
    .invoke('attr', 'value')
    .then((attVal) => {
      cy.log(attVal as string);
      // 将初始值存入环境变量
      Cypress.env('INITIAL_FIELD_VALUE', attVal);
    });
}

function restoreAliasField() {
  // 从环境变量取出初始值
  const initialValue = Cypress.env('INITIAL_FIELD_VALUE');
  cy.get(`div[data-textfield="editField"] input`)
    .clear()
    .type(initialValue as string);
}

方案二：用cy.wrap()包装静态值后别名

通过cy.wrap()将获取到的初始值包装为静态对象，再创建别名，这样别名存储的是具体值而非命令链：

function aliasAliasNameValue() {
  cy.get(`div[data-textfield="editField"] input`)
    .invoke('attr', 'value')
    .then((attVal) => {
      cy.log(attVal as string);
      // 用wrap包装静态值，再创建别名
      cy.wrap(attVal).as('ALIASNAME');
    });
}

// 恢复函数无需修改，此时@ALIASNAME是静态值
function restoreAliasField() {
  cy.get('@ALIASNAME').then((aliasN) => {
    cy.get(`div[data-textfield="editField"] input`)
      .clear()
      .type(aliasN as unknown as string);
  });
}

额外注意事项 #

如果你的输入框初始值是通过JavaScript动态设置的（而非HTML标签的value属性），那么invoke('attr', 'value')可能无法正确获取初始值，此时应改用invoke('val')获取输入框的当前值（初始状态下即为初始值）：

cy.get(`div[data-textfield="editField"] input`)
  .invoke('val') // 替换为val()获取当前值
  .then((attVal) => {
    cy.wrap(attVal).as('ALIASNAME');
  });

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