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?

1 thought on “How to reset the scrollHeight values on DOM elements retrieved using ClientFunction”

  1. 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

    Reply

Leave a Comment