Vue.js应用Cypress测试中如何禁用Ag Grid虚拟化

核心目标是测试环境下全局开启suppressRowVirtualisation、suppressColumnVirtualisation两个配置，让Ag Grid一次性渲染全部行列DOM，省去测试时编写滚动模拟逻辑的成本，以下是可直接落地的实现方案，按推荐优先级排序：

方案1：应用入口全局覆写默认配置（无侵入，最推荐） #

Ag Grid本身支持全局配置覆盖，所有网格实例会自动继承全局默认项，不需要修改任何业务组件代码，只需要在应用入口加环境判断即可。

• Ag Grid 28及以上版本（官方推荐API）：

// src/main.js 或 src/main.ts 应用入口文件
import { provideGlobalGridOptions } from '@ag-grid-community/core'

// 仅在Cypress测试环境下生效
if (window.Cypress) {
  provideGlobalGridOptions({
    suppressRowVirtualisation: true,
    suppressColumnVirtualisation: true
  })
}

• Ag Grid 28以下版本：

// src/main.js 或 src/main.ts 应用入口文件
import { GridOptions } from '@ag-grid-community/core'

if (window.Cypress) {
  GridOptions.prototype.suppressRowVirtualisation = true
  GridOptions.prototype.suppressColumnVirtualisation = true
}

注意：两个虚拟化配置会大幅降低大数据量场景下的网格渲染性能，务必加环境判断，禁止在生产环境开启

方案2：Cypress层注入配置（不修改业务代码可选） #

如果不想改动业务侧的应用入口代码，可以在Cypress的支持文件里自定义命令，在页面加载前注入全局配置，完全在测试层完成逻辑隔离。

1. 首先在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('disableAgGridVirtualisation', () => {
  cy.on('window:before:load', (win) => {
    const injectConfig = (agGridModule) => {
      if (agGridModule.provideGlobalGridOptions) {
        agGridModule.provideGlobalGridOptions({
          suppressRowVirtualisation: true,
          suppressColumnVirtualisation: true
        })
      } else if (agGridModule.GridOptions) {
        agGridModule.GridOptions.prototype.suppressRowVirtualisation = true
        agGridModule.GridOptions.prototype.suppressColumnVirtualisation = true
      }
    }

    // 处理Ag Grid已提前加载的场景
    if (win.agGrid) {
      injectConfig(win.agGrid)
      return
    }

    // 监听Ag Grid脚本加载完成后注入配置
    Object.defineProperty(win, 'agGrid', {
      configurable: true,
      set(loadedModule) {
        injectConfig(loadedModule)
        this._agGrid = loadedModule
      },
      get() {
        return this._agGrid
      }
    })
  })
})

2. 在测试用例中，访问页面前调用该命令即可：

// 测试用例文件
beforeEach(() => {
  cy.disableAgGridVirtualisation()
  cy.visit('/target-page-with-ag-grid')
})

方案3：单组件局部配置（小范围使用可选） #

如果仅个别测试场景需要禁用虚拟化，不需要全局生效，可以直接在对应业务组件的Ag Grid实例上绑定属性，通过环境判断控制开关：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowData="rowData"
    :suppressRowVirtualisation="isCypressEnv"
    :suppressColumnVirtualisation="isCypressEnv"
  />
</template>

<script setup>
const isCypressEnv = !!window.Cypress
</script>

该方案需要逐个给网格组件加配置，适合仅少量网格需要测试的场景，全局使用维护成本较高。

配置生效校验 #

配置完成后，可以在测试用例中通过Grid API校验配置是否正确加载：

// 提前封装好获取Ag Grid实例的自定义命令
cy.getAgGridInstance().then(gridApi => {
  expect(gridApi.getGridOption('suppressRowVirtualisation')).to.eq(true)
  expect(gridApi.getGridOption('suppressColumnVirtualisation')).to.eq(true)
})

配置生效后，所有行列DOM会在页面加载完成后一次性渲染，直接通过DOM选择器即可获取任意单元格、列头元素做断言，不需要额外编写滚动触发逻辑。

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