时间戳

首页 > 解决方案 > 如何重置使用 ClientFunction 检索到的 DOM 元素上的 scrollHeight 值

javascript - 如何重置使用 ClientFunction 检索到的 DOM 元素上的 scrollHeight 值

问题描述

我让 TestCafe 在两个单独的测试类中运行，在两个单独的装置中，在两个单独的测试中，测试两个不同的应用程序页面。

我注意到当我window.document通过这些测试询问对象时ClientFunction，根据运行顺序，我得到不同的值。

例如 mytest1.js

import { Selector, ClientFunction } from 'testcafe';

  fixture `Homepage`
    .page `http://mypage.com`;

  test('Test 1', async t => {

    const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
    console.log(await getBodyHeight()) // 800px

  });

mytest2.js

import { Selector, ClientFunction } from 'testcafe';

  fixture `Dashboard`
    .page `http://mypage.com/dashboard`;

  test('Test 2', async t => {

    const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);
    console.log(await getBodyHeight()) // 1200px

    });

如果我使用运行这些npm run testcafe -- firefox:headless mytest*.js命令并且从较小的高度到较大的高度，控制台将记录：

...
800
...
1200

但是，如果我以相反的方式运行这些（更大的高度到更小的高度），我得到：

...
1200
...
1200

就好像document.body被拉伸到最大值并且不会返回。

有没有办法使用ClientFunction(..)或其他方法来正确重置这些值？

标签： javascriptautomated-testse2e-testingweb-testingtestcafe

解决方案

这个测试场景 ClientFunction(() => window.document.body.scrollHeight) 看起来是正确的。我准备了一个小例子，我无法重现这种行为。以下示例是否按您的预期工作？

index1.html

<html>
<head></head>
<body>

</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>

index2.html

<html>
<head></head>
<body>

</body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
test
</html>

test1.js

import { Selector, ClientFunction } from 'testcafe';

fixture `My Fixture`
    .page `./index1.html`;

test('test 1', async (t) => {
    const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);

    console.log('test 1 body.scrollHeight', await getBodyHeight());
});

test2.js

import { Selector, ClientFunction } from 'testcafe';

fixture `My Fixture`
    .page `./index2.html`;

test('test 2', async (t) => {
    const getBodyHeight = ClientFunction(() => window.document.body.scrollHeight);

    console.log('test 2 body.scrollHeight', await getBodyHeight());
});

结果：

  1. testcafe "firefox:headless" tests/test1.js tests/test2.js
 My Fixture
test 1 body.scrollHeight 932
 √ test 1

 My Fixture
test 2 body.scrollHeight 1762
 √ test 2


 2 passed (0s)
  1. testcafe "firefox:headless" tests/test2.js tests/test1.js
 My Fixture
test 2 body.scrollHeight 1762
 √ test 2

 My Fixture
test 1 body.scrollHeight 932
 √ test 1


 2 passed (0s)

另请参阅：ClientFunction 对象

推荐阅读