Question

如何使用Test Cafe在网页上编写水平滚动测试

作为自动化测试以及Test Cafe的新手，我找不到使用Test cafe进行水平滚动测试的示例。

Answer 1

TestCafe不提供单独的scroll操作，但是，当您调用任何操作时，TestCafe会自动执行滚动。例如，如果需要滚动到某个元素，则可以使用hover操作。

如果仍然需要滚动页面而不进行任何操作，则可以使用ClientFunction机制。请查看以下代码：

import { ClientFunction } from 'testcafe';

const browserscroll = ClientFunction(function() {
    window.scrollBy(0,1000)
});

test('Test', async t => {
    await browserscroll();
});

已更新：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        #scroll-container {
            overflow: scroll;
            width: 800px;
            height: 800px;
        }

        #scroll-content {
            height: 5000px;
            width: 5000px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-content"></div>
    </div>
</body>
</html>

测试代码：

import { Selector, ClientFunction } from 'testcafe';

fixture `My first fixture`
    .page `../pages/index.html`;

const scrollContainer = Selector('#scroll-container');
const scrollFn = ClientFunction(scrollValue => {
    scrollContainer().scrollLeft = scrollValue;
}, { dependencies: { scrollContainer } });

test('My first test', async t => {
    await scrollFn(1000);

    await t.debug();
});

网页上水平滚动测试

1 个答案: