Cypress技术求助：列表项删除前后数量校验实现问题

原代码的核心问题是没有处理Cypress的异步特性——直接将Counter()赋值给变量得到的是Cypress的链式操作对象，而非实际的数字值，导致后续比较逻辑失效。以下是修正后的实现方案：

1. 修正计数获取函数 #

先调整Counter静态方法，确保它返回可被异步获取的数值：

static Counter() {
  return cy.get('.page-number > span')
    .invoke('text')
    .then(text => {
      // 提取文本末尾的数字部分，注意指定parseInt的基数为10
      const numStr = text.match(/([\d\.]*)$/gmi)[0];
      return parseInt(numStr, 10);
    })
    .should('be.a', 'number'); // 可选校验，确保结果是数字
}

2. 测试用例的正确写法 #

利用Cypress的.then()回调传递异步值，按顺序执行「获取初始计数→执行删除→获取新计数→校验差值」的流程：

describe('Compare totals before/after performing web actions', () => {
  it('Verify list item removal by count change', () => {
    // 获取初始计数，通过then拿到实际数值
    YourClassName.Counter().then(beforeCount => {
      // 执行移除列表项的操作（示例：点击第一个列表项的删除按钮）
      cy.get('.list-item').first().find('.delete-btn').click();
      
      // 可选：等待页面更新完成（比如等待加载状态消失、DOM重新渲染）
      cy.get('.loading-spinner').should('not.exist');
      
      // 获取删除后的计数，再次通过then拿到数值并比较
      YourClassName.Counter().then(afterCount => {
        expect(afterCount).to.equal(beforeCount - 1);
      });
    });
  });
});

关键注意事项 #

• 异步处理：Cypress所有DOM操作、数据获取都是异步的，必须通过.then()回调获取实际结果，不能直接同步赋值。
• 基数指定：parseInt要加第二个参数10，避免数字以0开头时被解析为八进制。
• 页面等待：删除操作后建议添加等待逻辑（如等待加载元素消失、等待计数元素更新），确保DOM已完成更新再获取新计数，避免拿到旧值导致校验失败。

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