How to scroll up and scroll down using TestCafe?

Question

How can I scroll up and scroll down using TestCafe?

I tried window.scroll(), window.scrollTo()and throws an error window is not defined.

Vladimir A. · Answer 1 · 2021-04-27T07:54:03.850

11

UPD: In v1.14.0 and later versions, you can use the following scroll methods: t.scroll, t.scrollBy, and t.scrollIntoView.

Old answer:

In your case, you can create your own ClientFunction:

import { ClientFunction } from 'testcafe';

fixture `Fixture`
    .page `https://github.com/DevExpress/testcafe`;

const scroll = ClientFunction(function() {
    window.scrollBy(0,1500);
});

test(`test`, async t => {
    await scroll();
    await t.wait(1000);
});

The t.hover action example:

// scroll to the "#some-element-scroll-to" element
await t.hover(Selector('#some-element-scroll-to'));

edited Apr 27 '21 at 07:54

answered Oct 01 '19 at 06:38

Vladimir A.

2,202
2
10
28

1

I tried both methods and doesn't work though I don't see any errors and the added steps went through while running the scripts. I am trying to scroll up in the same way as I use double fingers on the mac mousepad and scroll up. – chris Oct 02 '19 at 17:56
2

see the executable example [here](https://github.com/DevExpress/testcafe-examples/tree/master/examples/scroll) – mlosev Oct 12 '20 at 09:39

score 0 · Answer 2 · answered Mar 07 '22 at 04:24

I had similar issue on Mac and used following to scrollIntoView of a know element in the page.

import { ClientFunction, Selector } from 'testcafe';
const scrollIntoView = ClientFunction( (selector: Selector) => {
    const element = selector() as unknown as HTMLElement;
    element.scrollIntoView();
});
fixture`HTMLElement`
    .page('https://example.com');
test('Scroll element into view', async t => {
    const bottomOfPage = Selector('#bottom-div');
    await scrollIntoView(bottomOfPage);
});

Reference : Type cast page elements

How to scroll up and scroll down using TestCafe?

2 Answers2