Cypress无法检测部分元素变更——Angular 11应用测试中滚动与等待操作的必要性咨询

问题描述 #

我正在为Angular 11应用编写Cypress测试用例，代码如下：

it('should not work', function () { 
  cy.get('#someInput').type('someValue'); 
  cy.contains('someButton').click(); 
  cy.contains('someText'); 
  cy.get('.someClass'); 
  cy.get('#some element that doest show up unless the window is scrolled.') 
    .contains( 'someText' ) 
    .find('a') 
    .should('have.attr', 'href', 'someUrl'); 
});

除非进行手动或自动滚动操作，否则最后一个元素的断言验证始终会失败。添加cy.wait(1000)后执行cy.scrollTo(0, 750)，测试即可正常通过。请问该解决方案的作用原理是什么，为何必须添加等待与滚动步骤？

解答 #

1. 滚动步骤cy.scrollTo(0,750)的核心作用

很多现代Angular应用会采用虚拟滚动、懒加载组件或者滚动触发的DOM渲染策略：

• 为了优化性能，浏览器和Angular框架会默认不渲染视口以外的元素；或者组件会监听滚动事件，只有当元素进入视口范围时，才会触发数据加载、组件初始化和DOM渲染逻辑。
• 你的目标元素#some element that doest show up unless the window is scrolled.正好属于这种情况——它的DOM节点在页面未滚动到对应位置时根本不存在。
• Cypress的cy.get()、contains()等命令只会查找当前已渲染在DOM树中的元素，如果元素还没被渲染，自然会查找失败，导致断言不通过。cy.scrollTo()将页面滚动到目标元素所在的位置，触发了它的渲染逻辑，让对应的DOM节点生成，这时候Cypress才能找到并操作它。

2. 等待步骤cy.wait(1000)的作用

滚动触发渲染后，Angular的渲染流程是异步的：

• Angular需要时间完成组件实例化、数据绑定、DOM更新等操作，这个过程不是瞬间完成的——尤其是如果该元素依赖异步API请求获取数据，渲染延迟会更明显。
• 如果滚动后立刻执行查找元素的命令，可能Angular还没完成渲染，DOM节点尚未生成，Cypress依然会找不到元素。cy.wait(1000)给了Angular足够的时间完成异步渲染，确保目标元素完全出现在DOM中后，再进行后续的断言操作。

小提示：固定时间的cy.wait()并不是最优解，Cypress本身有强大的自动重试机制（比如cy.get()会自动重试直到元素出现或超时）。如果你的应用没有特殊的异步依赖，其实可以尝试去掉cy.wait()，只保留滚动步骤：

it('should work with scroll only', function () { 
  cy.get('#someInput').type('someValue'); 
  cy.contains('someButton').click(); 
  cy.contains('someText'); 
  cy.get('.someClass'); 
  // 先滚动到目标位置
  cy.scrollTo(0, 750);
  // Cypress会自动重试直到元素出现
  cy.get('#some element that doest show up unless the window is scrolled.') 
    .contains( 'someText' ) 
    .find('a') 
    .should('have.attr', 'href', 'someUrl'); 
});

如果元素渲染依赖API请求，更推荐用cy.intercept()监听对应的API，等待请求完成后再进行滚动和断言，这样测试会更稳定可靠。

3. 为什么必须同时使用这两步？

• 滚动是前提：没有滚动，目标元素永远不会被渲染到DOM中，Cypress根本找不到它；
• 等待是保障：滚动后直接查找元素，可能会遇到Angular异步渲染的时间差，导致元素还未生成，断言失败。等待步骤填补了这个时间差，确保DOM完全就绪。

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