'How to scroll up and scroll down using TestCafe?

How can I scroll up and scroll down using TestCafe?

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

testingscrollautomated-testse2e-testingtestcafe


Solution 1:[1]

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'));

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Janesh Kodikara

Related Questions