在 Puppeteer 中使用向下箭头滚动

Question

因此，我正在我的应用程序中开发一项功能，该功能在菜单打开时禁用正文上的箭头键滚动，否则将单独保留该行为。

我正在尝试在 Puppeteer 中测试该行为，但是当我按下箭头时，我似乎无法让窗口滚动。以下是我在实现和测试中所做的一些示例：

        const disableArrowScroll = (event: KeyboardEvent) => {
            if (
                isOpen &&
                (event.key === 'ArrowDown' ||
                    event.key === 'ArrowUp' ||
                    event.key === 'ArrowLeft' ||
                    event.key === 'ArrowRight')
            ) {
                event.preventDefault();
            }
        };

it('does not effect scroll when menu is closed', async () => {
    await menuClosed(); // Times out if menu is not closed
    await page.focus('body');

    await keyboard.press('ArrowDown');

    expect(await page.evaluate(() => window.scrollY > 0)).toBeTruthy();
});

我通过限制视口确保页面应该是可滚动的，但我真的不知道为什么 window.scrollY 仍然为 0。我错过了什么吗？在实际运行的演示中，代码似乎按预期运行。

Answer 1

问题是，在启动向下箭头键后，您需要给页面时间向下滚动。你可以通过改变...

await keyboard.press('ArrowDown');

...到...

await keyboard.press('ArrowDown');
await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1s