如何使用 TestCafe 向上和向下滚动？答案

【问题标题】：How to scroll up and scroll down using TestCafe?如何使用 TestCafe 向上和向下滚动？
【发布时间】：2019-09-30 21:23:36
【问题描述】：

如何使用 TestCafe 向上和向下滚动？

我试过window.scroll()， window.scrollTo()并抛出错误窗口未定义。

【问题讨论】：

标签： testing scroll automated-tests e2e-testing testcafe

【解决方案1】：

更新：在v1.14.0及以后的版本中，可以使用以下滚动方式：t.scroll、t.scrollBy、t.scrollIntoView。

旧答案：

根据您的情况，您可以创建自己的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);
});

t.hover 动作示例：

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

【讨论】：

我尝试了这两种方法，但没有看到任何错误，并且在运行脚本时执行了添加的步骤。我正在尝试以与在 mac 鼠标垫上使用双指并向上滚动相同的方式向上滚动。
查看可执行示例here

【解决方案2】：

我在 Mac 上遇到了类似的问题，并使用以下内容来滚动查看页面中的已知元素。

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

参考：Type cast page elements

【讨论】：