Cypress别名指向元素变化、DOM重载后无法定位问题咨询

第一个问题：别名指向新的首位复选框的原因 #

你对Cypress别名的理解存在偏差：当你通过cy.get(选择器).as()创建别名时，Cypress默认存储的不是执行查询那一刻捕获的DOM元素引用，而是整个查询命令本身。
你写的cy.get('input:checkbox').first().as('firstCheckbox')等价于把「查找所有复选框再取第一个」这个查询逻辑存为了@firstCheckbox，后续每次调用cy.get('@firstCheckbox')都会重新执行一遍这个查询，自然会拿到变化后的新的首位复选框。

如果要固定引用首次查询到的元素，需要在then回调中捕获当时的jQuery元素对象再操作：

cy.get('input:checkbox').first().then($firstCheckbox => {
  // 后续直接通过cy.wrap操作$firstCheckbox，不会重新触发查询
  cy.wrap($firstCheckbox).should('be.checked').click()
  // 其余操作省略
})

第二个问题：元素短暂移除后找不到的问题 #

你遇到的类名匹配失败、元素找不到的问题，本质是原DOM节点被销毁导致你之前捕获的$el引用失效了：

1. 你操作复选框后，JS修改了元素类名，你捕获的$el引用同步更新为修改后的类名
2. 随后元素被从DOM移除再重建，旧的$el引用指向的是已经被销毁的节点，自然无法在DOM中匹配到

这种元素会被销毁重建的场景，不适合用固定元素引用的方式操作，最优方案是通过唯一特征定位元素，而非依赖位置或临时元素引用：

• 如果复选框有id、name、value等唯一属性，直接用属性选择器定位，不管元素移动位置、销毁重建都能正确匹配
• 如果没有现成的唯一属性，可以在首次查询时提取元素的唯一特征，后续用特征构造选择器查询

参考实现代码：

// 第一步：提取目标复选框的唯一value属性，你也可以换成其他唯一特征
cy.get('input:checkbox').first().invoke('attr', 'value').then(targetValue => {
  const targetSelector = `input:checkbox[value="${targetValue}"]`

  cy.get(targetSelector).should('be.checked').click()
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
  // 自动等待元素重建完成
  cy.get(targetSelector).should('exist').and('not.be.checked').click()
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('be.visible')
  cy.get('.globalMessage-display > :nth-child(1) > .alert').should('not.exist')
  cy.get(targetSelector).should('be.checked')
})

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