Search code examples
javascriptautomated-testse2e-testingweb-testingtestcafe

How to reset the scrollHeight values on DOM elements retrieved using ClientFunction

I have TestCafe running in two separate test classes, in two separate fixtures, in two separate tests, testing two different app pages.

I notice when I interrogate the window.document object through the ClientFunction in these tests, depending on the running order, I get differing values.

e.g. 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

    });

If I run these using npm run testcafe -- firefox:headless mytest*.js and the order is smaller height to larger height, the console will log:

...
800
...
1200

However if I run these the opposite way (larger height to smaller height), I get:

...
1200
...
1200

It is as if the document.body is stretched to a max value and doesn't return.

Is there a way using the ClientFunction(..) or possibly some other means to reset these values correctly?

Solution

  • This test scenario with ClientFunction(() => window.document.body.scrollHeight) looks correct. I prepared a small example and I can't reproduce this behavior. Does the following example work as expected on your side?

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

    Results:

    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)

    See also: ClientFunction Object