如何使用Cypress校验表格中仅有一个元素含指定类名

你的代码问题在于：cy.get('td:nth-child(2)').should('not.have.class', 'checked') 会要求所有选中的td都不能有checked类，这和你的需求完全相反，同时后面的have.length逻辑也不成立。

针对你的React+TypeScript场景，正确的校验方式应该拆分逻辑：先确认有且仅有一个元素带.checked类，再确认其余元素都不带这个类。

写法一：分两次筛选校验 #

it("校验仅一个邮箱设置为primary，其余均为非primary", () => {
  // 获取第二列所有元素
  const primaryColumn = cy.get('td:nth-child(2)');
  
  // 1. 校验带.checked类的元素数量恰好为1
  primaryColumn.filter('.checked').should('have.length', 1);
  
  // 2. 校验不带.checked类的元素数量等于总元素数减1
  primaryColumn.not('.checked').should(($elements) => {
    expect($elements.length).to.eq(primaryColumn.length - 1);
  });
});

写法二：一次性断言所有元素的类名情况 #

it("校验仅一个邮箱设置为primary，其余均为非primary", () => {
  cy.get('td:nth-child(2)').should(($tds) => {
    // 统计带.checked类的元素数量
    const checkedCount = $tds.filter('.checked').length;
    // 断言数量为1
    expect(checkedCount).to.eq(1);
    // 同时验证其余元素都不带这个类（可选，数量统计已隐含此逻辑）
    expect($tds.not('.checked').length).to.eq($tds.length - 1);
  });
});

优化建议 #

如果你的单选按钮是React组件渲染的，建议给该列元素加上更精准的测试标识（比如data-testid="primary-email-cell"），避免依赖nth-child这种易受页面结构变化影响的选择器，提升测试稳定性。

若单选按钮本身是<input type="radio">，也可以直接校验radio的原生checked属性，而非依赖类名：

cy.get('input[type="radio"][name="primary-email"]')
  .should(($radios) => {
    const checkedRadios = $radios.filter(':checked');
    expect(checkedRadios.length).to.eq(1);
  });

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