Cypress技术求助：仅点击含chevron_right的按钮，现有代码报错

排查原因 #

• 核心问题：代码逻辑硬绑定了仅查找chevron_right状态的元素，按钮切换状态后，原标识（DOM文本/类名）已替换为expand_more，后续操作仍按原标识查找，导致找不到元素报错。
• 额外风险：页面存在多个同类型按钮，若用全局选择器直接搜索图标标识，会误操作其他按钮，加剧逻辑混乱。

解决方案 #

1. 基于按钮容器的相对查找（推荐） #

给每个按钮套独立容器，操作时先定位目标容器，再在容器内查找当前状态的图标，完全隔离不同按钮的状态：

// 示例结构：<div class="toggle-btn-container"><i class="material-icons">chevron_right</i></div>
document.querySelectorAll('.toggle-btn-container').forEach(container => {
  container.addEventListener('click', () => {
    const icon = container.querySelector('.material-icons');
    if (icon.textContent === 'chevron_right') {
      icon.textContent = 'expand_more';
      // 执行启用逻辑
    } else {
      icon.textContent = 'chevron_right';
      // 执行禁用逻辑
    }
  });
});

• 优势：不会误操作其他按钮，每次操作都基于当前容器内的实时状态判断，彻底避免"找不到元素"的问题。

2. 用自定义属性标记按钮状态 #

给按钮添加自定义属性记录状态，不依赖图标文本做判断，状态逻辑更稳定：

<button class="toggle-btn" data-toggle-state="disabled">
  <i class="material-icons">chevron_right</i>
</button>

document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const currentState = btn.getAttribute('data-toggle-state');
    const icon = btn.querySelector('.material-icons');
    if (currentState === 'disabled') {
      btn.setAttribute('data-toggle-state', 'enabled');
      icon.textContent = 'expand_more';
      // 启用逻辑
    } else {
      btn.setAttribute('data-toggle-state', 'disabled');
      icon.textContent = 'chevron_right';
      // 禁用逻辑
    }
  });
});

• 优势：状态判断不受图标文本变更影响，即使后续调整图标样式，也无需修改状态判断逻辑。

3. 修复原逻辑的状态判断错误 #

若原代码是硬查找chevron_right元素再绑定事件，改成基于当前元素的实时状态判断：

// 错误示例（导致报错的根源）：
// document.querySelector('.material-icons:contains("chevron_right")').addEventListener(...)
// 正确写法：
document.querySelectorAll('.toggle-icon').forEach(icon => {
  icon.parentElement.addEventListener('click', () => {
    if (icon.textContent === 'chevron_right') {
      icon.textContent = 'expand_more';
      // 启用逻辑
    } else {
      icon.textContent = 'chevron_right';
      // 禁用逻辑
    }
  });
});

• 注意：给所有目标图标添加统一类名（如toggle-icon），避免和页面其他图标混淆。

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