如何在Cypress中等待列表项数量变化并解决变量作用域问题？

云原生阿岚

2026-7-14

Cypress测试列表过滤：等待项数变化的正确姿势

为什么`itemsCountBefore`在外部是undefined？

Cypress的命令是异步队列执行的，cy.get().then()里的代码会被加入Cypress的命令队列，等待前面的命令执行完成后才会运行。而你外层的cy.log是同步执行的，此时itemsCountBefore还没被赋值，所以输出undefined。

正确的测试实现

不需要提前存储初始数量再做对比，直接在执行过滤操作后，让Cypress等待列表项数量发生变化即可。以下是两种可靠的写法：

写法1：链式调用对比初始数量

通过.then()链式操作保证执行顺序，先获取初始数量，再执行过滤，最后断言数量变化：

// 获取初始列表项数量
cy.get(homePage.elements.anyListItem).then(($initialItems) => {
  const initialCount = $initialItems.length;
  
  // 执行过滤输入操作
  cy.get('input.filter-input').type('过滤关键词');
  
  // 等待列表项数量与初始值不同
  cy.get(homePage.elements.anyListItem).should(($currentItems) => {
    expect($currentItems.length).to.not.equal(initialCount);
  });
});

写法2：直接断言数量变化（更简洁）

如果不需要用到初始数量的具体数值，可直接让Cypress监听DOM变化，断言列表项数量发生改变：

// 先获取一次列表项，建立基准状态
cy.get(homePage.elements.anyListItem);

// 执行过滤操作
cy.get('input.filter-input').type('过滤关键词');

// 等待列表项数量与之前的基准状态不同
cy.get(homePage.elements.anyListItem).should('have.length.not.equal', Cypress.$(homePage.elements.anyListItem).length);