Cypress在Chrome中页面渲染异常：旧页面叠加显示问题求助

问题原因分析 #

这种仅在Cypress测试中出现的页面叠加渲染（旧页面DOM残留），通常和以下几点有关：

• Cypress执行速度与React异步更新不匹配：React状态更新是异步的，Cypress默认的自动等待可能未正确识别组件卸载/重渲染完成，导致旧DOM还未被移除就执行后续操作。
• MUI组件过渡动画干扰：MUI的Modal、Drawer等组件自带过渡动画，动画未完成时旧组件仍会保留在DOM中，Cypress此时操作会误匹配旧元素。
• 模糊的元素定位选择器：测试中使用cy.contains('button', 'Select Merchant')这类模糊选择器，当旧页面DOM未完全移除时，会匹配到背景中残留的旧元素。
• 页面滚动触发的渲染异常：点击复选框后的自动滚动可能触发React重渲染，但Cypress执行速度过快，DOM更新不及时导致旧元素残留。

解决方案 #

1. 优化元素定位精度 #

避免模糊匹配，使用唯一标识定位元素：

• 给"Select Merchant"按钮添加data-testid属性：

  <Button data-testid="select-merchant-btn">Select Merchant</Button>
  

• 测试代码中改为精确选择器：

  cy.get('[data-testid="select-merchant-btn"]').click()
  

• 移除依赖DOM顺序的eq(index)定位，改用属性或父元素范围锁定目标，比如：

  // 替代cy.get('[data-testid="RemoveCircleIcon"]').eq(1).click()
  cy.get('[data-testid="merchant-recipients"]').find('[data-testid="RemoveCircleIcon"]').click()
  

2. 等待DOM状态稳定 #

确保旧DOM完全移除后再执行下一步：

• 等待旧页面标志性元素消失：

  cy.get('[value="merchant"]').click()
  // 等待旧页面的某个唯一元素消失
  cy.get('[data-testid="old-form-element"]').should('not.exist')
  cy.get('[data-testid="select-merchant-btn"]').click()
  

• 等待MUI组件动画完成：
  如果是Modal组件，等待其open状态对应的CSS类出现：

  cy.get('[data-testid="merchant-modal"]').should('have.class', 'MuiModal-open')
  

3. 禁用页面动画 #

在Cypress支持文件中全局禁用CSS过渡和动画，避免动画导致的DOM残留：
在cypress/support/e2e.js中添加：

Cypress.on('window:before:load', (win) => {
  win.document.addEventListener('DOMContentLoaded', () => {
    const style = win.document.createElement('style');
    style.innerHTML = `
      * {
        transition: none !important;
        animation: none !important;
      }
    `;
    win.document.head.appendChild(style);
  });
});

4. 等待API请求完成 #

如果点击复选框后有数据请求，等待请求完成再操作：

// 拦截商户列表请求
cy.intercept('GET', '/api/merchants').as('fetchMerchants')

cy.get('[value="merchant"]').click()
// 等待请求完成
cy.wait('@fetchMerchants')
cy.get('[data-testid="select-merchant-btn"]').click()

5. 调整Cypress默认等待时间 #

在cypress.config.js中增加默认命令超时时间，给页面足够的DOM更新时间：

export default defineConfig({
  e2e: {
    defaultCommandTimeout: 10000, // 单位：毫秒
  },
});

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