如何用TestCafe模拟键盘按键长按5秒？现有实现遇阻求指导

可能的原因及解决方案 #

• 焦点未正确定位：TestCafe的pressKey会将按键事件发送到当前有焦点的元素，如果焦点不在可滚动容器/页面上，按键不会触发滚动。
• 原生事件模拟需求：部分场景下，TestCafe内置的pressKey无法覆盖，需要手动模拟原生键盘事件。

方案1：确保焦点后使用pressKey #

先将焦点设置到页面的可滚动区域（比如body或具体滚动容器），再执行pressKey：

import { Selector, t } from 'testcafe';

const sCounter = Selector('#your-counter-selector');

fixture('PageDown Test')
    .page('https://your-test-page.com');

test('Test PageDown with correct focus', async t => {
    // 点击目标元素
    await t.click(sCounter);
    // 将焦点切换到body（或指定滚动容器）
    await t.click('body');
    // 执行PageDown按键
    await t.pressKey('pagedown');
});

方案2：使用ClientFunction模拟原生键盘事件 #

如果pressKey仍无效，可通过ClientFunction创建自定义函数触发原生keydown/keyup事件：

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

const sCounter = Selector('#your-counter-selector');

// 创建模拟PageDown按键的ClientFunction
const triggerPageDown = ClientFunction(() => {
    // 创建keydown事件
    const keydownEvent = new KeyboardEvent('keydown', {
        key: 'PageDown',
        code: 'PageDown',
        bubbles: true,
        cancelable: true
    });
    // 创建keyup事件
    const keyupEvent = new KeyboardEvent('keyup', {
        key: 'PageDown',
        code: 'PageDown',
        bubbles: true,
        cancelable: true
    });

    // 向body触发事件（可替换为目标滚动容器）
    document.body.dispatchEvent(keydownEvent);
    // 模拟按键抬起，部分场景需要
    setTimeout(() => {
        document.body.dispatchEvent(keyupEvent);
    }, 100);
});

fixture('PageDown Test with ClientFunction')
    .page('https://your-test-page.com');

test('Trigger PageDown via ClientFunction', async t => {
    await t.click(sCounter);
    // 调用自定义的PageDown触发函数
    await triggerPageDown();
});

额外说明 #

• 你原代码中，eval里的事件监听是在测试执行时添加的，但pressKey可能在监听生效前就已触发，因此无法捕获事件。若要验证按键触发，可将监听逻辑提前到页面加载阶段，或在ClientFunction触发前添加监听。
• 如果目标是实现页面滚动，直接调用window.scrollBy或element.scrollTop可能比模拟按键更可靠：

const scrollPageDown = ClientFunction(() => {
    // 滚动页面高度的一半
    window.scrollBy(0, window.innerHeight / 2);
});

// 测试中调用
await scrollPageDown();

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