Cypress中依次点击按钮查找指定文本的实现问题咨询

问题场景 #

页面存在4个按钮，点击每个按钮会展示对应不同的数据。需要实现逻辑：依次点击按钮1，若页面未显示指定文本则点击按钮2，以此类推直至找到该文本（文本位置不固定，无法硬编码）。现有代码存在判断失效问题：使用element.contains(text)报错，通过contains.size判断时总是进入最后else分支。

原尝试代码示例：

cy.get(button1).click()
  cy.get("body").then(($body) => {
    if ($body.find(specifiedText).length > 0) {
      cy.get(elementThatContainsTheText).click()
      // cy.get(specifiedText).click()
    } else {
      cy.get(button2).click()
      if ($body.find(specifiedText).length > 0) {
        cy.get(elementThatContainsTheText).click()
        // cy.get(specifiedText).click()
      } else {
        cy.get(button3).click()
        if ($body.find(specifiedText).length > 0) {
          cy.get(elementThatContainsTheText).click()
          // cy.get(specifiedText).click()
        } else {
          cy.get(button4).click()
          cy.get(elementThatContainsTheText).click()
          // cy.get(specifiedText).click()
        }
      }
    }
  })

cy.get(button1).click()
cy.get("body").then(($body) => {
  if (cy.get(elementThatContainsTheText).contains("text") > 0) {
    cy.log("text is not here")
  } else {
    cy.get(button2).click()
    if (cy.get(elementThatContainsTheText).contains("text") > 0) {
      cy.log("text is not here button2")
    } else {
      cy.get(button3).click()
      if (cy.get(elementThatContainsTheText).contains("text") > 0) {
        cy.log("i should be here")
      } else {
        cy.log("last else, why am i here?")
      }
    }
  }
}) 

原代码问题分析 #

1. DOM快照未更新：第一个代码中，$body是点击按钮1前获取的DOM快照，后续点击按钮2/3/4后未重新获取最新DOM，$body.find()始终检查旧内容，导致无法识别新展示的文本。
2. 命令对象错误比较：第二个代码中，cy.get(elementThatContainsTheText).contains("text")返回的是Cypress链式命令对象，不是元素数量，与0比较结果永远为true，逻辑完全错误。

解决方案 #

采用递归方式处理按钮点击与文本检查，确保每次判断基于最新页面状态：

// 定义按钮选择器数组，按顺序排列
const buttonSelectors = ['button1', 'button2', 'button3', 'button4'];
// 目标文本
const targetText = '需要查找的指定文本';

// 递归检查函数
const checkButtonSequence = (currentIndex) => {
  // 边界判断：所有按钮遍历完毕仍未找到
  if (currentIndex >= buttonSelectors.length) {
    cy.log('所有按钮已遍历，未找到目标文本');
    return;
  }

  // 点击当前按钮
  cy.get(buttonSelectors[currentIndex]).click();
  
  // 若按钮点击后有加载状态，需等待加载完成（示例：等待加载 spinner 消失）
  // cy.get('.loading-indicator').should('not.exist');

  // 获取最新页面DOM，检查是否包含目标文本
  cy.get('body').then(($body) => {
    if ($body.text().includes(targetText)) {
      // 找到文本，点击包含该文本的元素
      cy.contains(targetText).click();
    } else {
      // 未找到，递归处理下一个按钮
      checkButtonSequence(currentIndex + 1);
    }
  });
};

// 从第一个按钮开始执行
checkButtonSequence(0);

方案关键点 #

• 数组管理按钮：避免嵌套if-else的冗余代码，逻辑更清晰易维护
• 实时DOM检查：每次点击后重新获取body的最新DOM，用text().includes()判断文本是否存在，适配文本位置不固定的场景
• 递归遍历：确保每次判断都基于按钮点击后的最新页面状态
• 边界处理：防止数组越界，遍历完所有按钮后给出提示

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