TestCafe自动化脚本中如何实现表格向左滚动？

TestCafe完全支持横向滚动操作，针对你这种固定前3列的表格场景，核心是找到表格的滚动容器（通常是带overflow-x: auto/scroll的tbody或外层div），然后通过以下几种方式实现向左滚动：

方法1：使用TestCafe内置的scroll方法 #

直接调用元素的scroll方法，指定x轴负偏移量实现向左滚动：

import { Selector, t } from 'testcafe';

fixture`表格滚动测试`
    .page`你的页面URL`;

test('向左滚动表格', async t => {
    // 定位表格的滚动容器（替换成你页面实际的选择器）
    const tableScrollContainer = Selector('.table-wrapper');
    // 向左滚动300像素，y轴保持0不变
    await t.scroll(tableScrollContainer, -300, 0);
});

方法2：执行原生JS操作scrollLeft属性 #

如果内置方法效果不理想，直接操作DOM的scrollLeft属性更可靠——scrollLeft值越小，容器显示内容越靠左，所以向左滚动需要减少该值：

import { Selector, ClientFunction, t } from 'testcafe';

fixture`表格滚动测试`
    .page`你的页面URL`;

// 定义滚动函数
const scrollTableLeft = ClientFunction((containerSelector, scrollAmount) => {
    const container = document.querySelector(containerSelector);
    container.scrollLeft -= scrollAmount;
});

test('向左滚动表格', async t => {
    // 向左滚动300像素
    await scrollTableLeft('.table-wrapper', 300);
});

方法3：滚动到指定列（精准滚动） #

如果需要滚动到某一列的位置，可以先获取目标列的偏移量，计算滚动距离：

import { Selector, ClientFunction, t } from 'testcafe';

fixture`表格滚动测试`
    .page`你的页面URL`;

test('滚动到目标列', async t => {
    const tableScrollContainer = Selector('.table-wrapper');
    const targetColumn = Selector('.table-column-5'); // 目标列的选择器

    // 获取目标列的左侧偏移量和容器当前的滚动位置
    const targetOffset = await targetColumn.offsetLeft;
    const currentScrollLeft = await tableScrollContainer.scrollLeft;

    // 计算需要滚动的距离，调整scrollLeft到目标位置
    const scrollDistance = targetOffset - currentScrollLeft;
    await t.scroll(tableScrollContainer, scrollDistance, 0);
});

关键注意点 #

• 务必通过浏览器开发者工具确认滚动容器：找到表格结构中带有overflow-x: auto或scroll样式的元素，这才是实际能触发横向滚动的容器，不要直接定位整个table标签。
• 滚动像素值可以根据页面实际布局调整，若需要滚动到最左侧，可将scrollLeft设为0。

内容的提问来源于stack exchange，提问作者Hiếu Đinh Trần