Cypress双元素类断言问题：else分支元素无法调用text()求解决方案

问题根源 #

你当前代码的问题在于：

1. 用Cypress.$全局同步获取DOM元素，可能在断言时目标元素还未完成渲染，导致$usualPayout为空jQuery对象，调用text()报错。
2. cy.wrap(null).then()属于冗余代码，打乱了Cypress的异步命令执行顺序，无法利用Cypress自动等待DOM就绪的特性。

修改方案一：基于DOM上下文的同步判断 #

通过cy.get('body')确保DOM稳定后，在回调内基于当前DOM上下文查找元素，避免异步时序问题：

cy.get('body').then(($body) => {
  const $calculatorPayout = $body.find(".flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main");
  
  if ($calculatorPayout.length > 0) {
    expect($calculatorPayout).to.be.visible;
    expect($calculatorPayout.text()).to.match(/^\d{3}\.\d{1}%$/);
  } else {
    const $usualPayout = $body.find('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]').last();
    expect($calculatorPayout).to.not.exist;
    expect($usualPayout).to.be.visible;
    expect($usualPayout.text()).to.match(/^(-|\d+\.\d{1}%)/);
  }
});

修改方案二：使用Cypress命令链断言（推荐） #

这种写法更符合Cypress的异步设计，利用invoke('text')安全获取元素文本，同时自动等待元素就绪：

cy.get('body').then(($body) => {
  const calculatorSelector = ".flex.flex-col.items-center.justify-center.h-\\[50px\\].w-10.border.border-solid.border-black-main";
  
  if ($body.find(calculatorSelector).length) {
    cy.get(calculatorSelector)
      .should('be.visible')
      .invoke('text')
      .should('match', /^\d{3}\.\d{1}%$/);
  } else {
    cy.get('div[class="relative flex flex-col items-center justify-center font-bold text-[#2F2F2F]"] [class="height-content"]')
      .last()
      .should('be.visible')
      .invoke('text')
      .should('match', /^(-|\d+\.\d{1}%)/);
  }
});

关键优化点 #

• 移除无意义的cy.wrap(null).then()，回归Cypress的命令执行逻辑。
• 基于cy.get('body')的DOM上下文查找元素，保证获取到的是最新渲染的DOM节点。
• 推荐使用invoke('text')替代直接调用jQuery的text()，Cypress会自动处理元素就绪等待，避免因元素未加载导致的错误。

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