웹사이트 검색

타입스크립트 - Puppeteer에서 아래 화살표로 스크롤하기


그래서 저는 앱에서 메뉴가 열려 있을 때 본문에서 화살표 키로 스크롤하는 기능을 비활성화하고, 그렇지 않을 때는 동작을 그대로 두는 기능을 작업하고 있습니다.

저는 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으로 남아 있는 이유를 정말 모르겠습니다. 제가 뭔가 놓치고 있는 걸까요? 실제 실행되는 데모에서는 코드가 예상대로 작동하는 것 같습니다.

답변 #1

문제는 아래쪽 화살표 키를 누른 후 페이지가 아래로 스크롤될 시간을 줘야 한다는 것입니다. 이는 ...를 변경하여 할 수 있습니다.

await keyboard.press('ArrowDown');

...에게...

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