如何通过Selenium或JavaScript实现MUI表格的横向滚动？

当然可以通过Selenium结合JavaScript实现MUI表格的横向滚动，针对懒加载场景，以下是几种可行方案：

方案一：分步修改scrollLeft触发懒加载 #

MUI虚拟滚动容器（.MuiDataGrid-virtualScroller）支持通过scrollLeft属性控制横向滚动，但一次性设置过大值无法触发懒加载，需要分步滚动并检查目标列是否加载：

在Selenium中执行以下JavaScript代码：

// 获取滚动容器
const scroller = document.querySelector('.MuiDataGrid-virtualScroller');
// 定义滚动直到目标列加载的函数
function scrollToTargetColumn(targetSelector) {
  return new Promise((resolve) => {
    const scrollInterval = setInterval(() => {
      // 检查目标列是否已存在于DOM
      const targetCol = document.querySelector(targetSelector);
      if (targetCol) {
        clearInterval(scrollInterval);
        resolve(targetCol);
      } else {
        // 每次向右滚动500px，可根据表格列宽调整
        scroller.scrollLeft += 500;
      }
    }, 200); // 滚动后等待200ms，给懒加载留渲染时间
  });
}

// 调用示例：等待字段为"Z"的列加载（替换为你的目标列选择器）
scrollToTargetColumn('[data-field="Z"]');

在Selenium中调用方式（以Python为例）：

driver.execute_script("""
// 上面的JS代码
""")

方案二：模拟鼠标拖拽滚动条 #

部分MUI表格的虚拟滚动对scrollLeft变化响应较弱，可模拟鼠标拖拽横向滚动条触发滚动：

function dragScrollUntilLoaded(targetSelector) {
  const scroller = document.querySelector('.MuiDataGrid-virtualScroller');
  const horizontalScrollbar = document.querySelector('.MuiDataGrid-scrollbarHorizontal');
  if (!horizontalScrollbar) return;

  return new Promise((resolve) => {
    const interval = setInterval(() => {
      if (document.querySelector(targetSelector)) {
        clearInterval(interval);
        resolve();
      } else {
        // 模拟鼠标拖拽滚动条向右移动300px
        const rect = horizontalScrollbar.getBoundingClientRect();
        const downEvent = new MouseEvent('mousedown', { clientX: rect.left + 10, bubbles: true });
        const moveEvent = new MouseEvent('mousemove', { clientX: rect.left + 310, bubbles: true });
        const upEvent = new MouseEvent('mouseup', { bubbles: true });

        horizontalScrollbar.dispatchEvent(downEvent);
        horizontalScrollbar.dispatchEvent(moveEvent);
        horizontalScrollbar.dispatchEvent(upEvent);
      }
    }, 300);
  });
}

// 调用示例
dragScrollUntilLoaded('[data-field="Z"]');

方案三：调用MUI DataGrid内置API（最优） #

如果页面代码中暴露了DataGrid的实例（比如通过React ref挂载到全局），可以直接调用官方提供的scrollTo方法，精准滚动到目标列：

// 假设DataGrid的ref被挂载到window.gridRef
window.gridRef.current.scrollTo({ field: 'Z' });
// 或者直接滚动到最右侧
window.gridRef.current.scrollTo({ left: Infinity });

这种方式无需模拟滚动，直接触发组件内部的滚动逻辑，能完美触发懒加载。

关键注意事项 #

• 必须分步滚动，避免一次性滚动到最大位置，否则懒加载机制不会触发新列渲染
• 每次滚动后需等待一定时间（200-300ms），确保组件完成新列的渲染
• 优先使用JS执行滚动操作，Selenium的Actions类对虚拟滚动容器的支持有限

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