如何在Cypress中读取带横向滚动的ag-grid全列数据？

ag-grid默认仅渲染可视区域内的列，未滚动到的列不会被DOM渲染，因此直接使用cy.get('#myGrid').getAgGridData()无法获取非可视列的数据，以下是几种可行的解决方法：

方法一：强制渲染所有列 #

通过修改ag-grid的布局或调用API，让所有列直接显示在可视区域内，无需滚动：

cy.get('#myGrid').then($grid => {
  const gridApi = $grid[0].api;
  // 调用ag-grid API让所有列自适应宽度，强制显示全部
  gridApi.sizeColumnsToFit();
  // 或者直接设置容器宽度为足够大的值（根据实际列数调整）
  // $grid.css('width', '2500px');
});

// 此时再获取数据即可包含所有列
cy.get('#myGrid').getAgGridData().then(fullData => {
  // 处理完整数据
});

方法二：模拟滚动逐列收集数据 #

循环滚动到每一列的位置，等待列渲染完成后读取当前可视数据，最终合并为完整数据集：

cy.get('#myGrid').then($grid => {
  const gridApi = $grid[0].api;
  const allColumnIds = gridApi.getAllColumns().map(col => col.colId);
  const fullGridData = [];

  allColumnIds.forEach((colId, idx) => {
    // 滚动到目标列，确保其被渲染
    gridApi.ensureColumnVisible(colId);
    cy.wait(300); // 等待列渲染完成，时间按需调整

    cy.get('#myGrid').getAgGridData().then(currentVisibleData => {
      if (idx === 0) {
        // 第一组数据直接存入
        fullGridData.push(...currentVisibleData);
      } else {
        // 后续数据合并到已有行中
        fullGridData.forEach((row, rowIdx) => {
          row[colId] = currentVisibleData[rowIdx][colId];
        });
      }
    });
  });

  // 将完整数据存入Cypress别名，供后续测试使用
  cy.wrap(fullGridData).as('completeGridData');
});

方法三：直接调用ag-grid API获取原始数据 #

这是最可靠的方案，无需依赖DOM渲染，直接通过ag-grid的内置API获取所有行的完整数据：

cy.get('#myGrid').then($grid => {
  const gridApi = $grid[0].api;
  // 获取所有行的原始数据（不受可视区域限制）
  const allFullData = gridApi.getAllRows().map(row => row.data);
  // 存入别名供后续使用
  cy.wrap(allFullData).as('fullGridData');
});

推荐优先使用方法三，因为它绕过了DOM渲染的限制，直接从ag-grid的数据层获取完整内容，无需处理滚动和渲染等待的问题。

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