Cypress TypeScript递归函数问题：删完列后仍触发删除点击

API 探路者

2026-8-21

问题：递归删除表格列后仍触发无效点击

问题场景

表格带有“添加”“删除”按钮，新增列后删除按钮启用；删除所有新增列后，删除按钮会被禁用。编写的递归删除函数deleteNonDefaultStopZones在删完所有列后，仍尝试点击已禁用的删除按钮。

原代码问题分析

原代码中判断按钮是否禁用的逻辑完全错误：

if (element.find('disabled').length === 0) {
  this.deleteNonDefaultStopZones();
}

disabled是按钮的属性，不是子元素，用element.find('disabled')永远找不到匹配的元素，导致判断条件始终为真，递归无法正确终止。

修正方案

方案1：直接判断元素是否禁用

利用jQuery的is(':disabled')方法检查按钮状态，正确终止递归：

public deleteNonDefaultStopZones(): SettingsPage {
  cy.get('[aria-label="Remove zone price"]').then((element) => {
    // 按钮已禁用则终止递归
    if (element.is(':disabled')) {
      return this;
    }
    // 点击按钮后继续递归
    element.click().then(() => {
      this.deleteNonDefaultStopZones();
    });
  });

  return this;
}

方案2：筛选可点击的按钮再操作

先筛选出未禁用的删除按钮，存在则点击并递归，不存在则终止：

public deleteNonDefaultStopZones(): SettingsPage {
  cy.get('[aria-label="Remove zone price"]').then(($buttons) => {
    // 筛选出所有未禁用的删除按钮
    const enabledButtons = $buttons.filter(':not(:disabled)');
    if (enabledButtons.length === 0) {
      return this;
    }
    // 点击第一个可操作的按钮后继续递归
    enabledButtons.first().click().then(() => {
      this.deleteNonDefaultStopZones();
    });
  });

  return this;
}