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

Question

如何使用TestCafe进行滚动操作？

我尝试过window.scroll()和window.scrollTo()，但出现错误提示window未定义。

- chris

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

- Vladimir A.

---

我尝试了两种方法，但都不起作用，尽管我没有看到任何错误，添加的步骤在运行脚本时都可以通过。我正在尝试以与我在Mac鼠标板上使用双指向上滚动的方式向上滚动。 - chris

请查看可执行示例此处。 - mlosev

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

参考：类型转换页面元素

- Janesh Kodikara

Answer 3

testcafe 3.3.0已经在本地启用了滚动功能，如果我们选择的元素超出了视口范围，例如如果您有一个下拉菜单并且它在底部边缘打开，隐藏了一些选项或者testcafe滚动到底部以选择其中一个选项并关闭下拉菜单，您只需在DOM中选择一个下方的元素，testcafe会滚动到该元素上，从而使得下拉菜单中的所有项目都可以选择。我给您展示一个代码示例（idNotVisible是视口外的元素）：

.typeText('#idNotVisible', 'John Smith')

或者

.click('#idNotVisible')  




  

- salvo720