Guide on resetting the scrollHeight values of DOM elements obtained using ClientFunction

I am currently using TestCafe to run tests in two separate fixtures and classes for different app pages. I have noticed that when I use the "ClientFunction" to access the "window.document" object in these tests, the values can vary depending on the execution order.

For example, in 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

  });

In 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

    });

When I run these tests with 

npm run testcafe -- firefox:headless mytest*.js
in a certain order, I see inconsistent results in the console output.

...
800
...
1200

However, if I reverse the order, I get:

...
1200
...
1200

It seems like the document body is reaching a maximum value and not resetting properly.

Is there a way to reset these values correctly using ClientFunction or any other method?

javascriptautomated-testse2e-testingweb-testingtestcafe

Answer №1

Upon executing this specific test scenario using 

ClientFunction(() => window.document.body.scrollHeight)
, it appears to be accurate. I conducted a simple trial and encountered no issues. Could you please confirm if the provided sample functions correctly on your end?

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing code requiring document.title in Next.js with Static Site Generation (SSG)

Currently, I have 2 dynamic SSG pages located under /blog/[slug]. Within these pages, I am rendering a component using next/link. When I click on these links to navigate to another slug, I encounter an issue. The problem arises when I want to execute some ...

javascriptreactjsnext.js

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

Warning: The use of the outdated folder mapping "./" in the "exports" field for module resolution in the package located at node_modulespostcsspackage.json is deprecated

I recently upgraded my Node to version 16 and since then I have been encountering this issue while building my Angular app. Warning: The folder mapping "./" used in the "exports" field of the package located at ".../node_modules/postcss/package.json" is de ...

javascriptnode.jsangulartypescript

Setting up React Native on a Mac M1 device

I am currently setting up React Native on my MacBook M1 Despite having installed npm, JDK, Node, Rosetta, CocoaPod, VSCode, Android Studio, Xcode and more, when I try to run the command (npm start), the directories for iOS and Android are not present. The ...

javascriptiosnode.jsreact-nativenpm

Unable to establish connection with server through Ajax request on HTML page

I set up a NodeJs server using the Express module. However, I am facing issues with implementing an AJAX request from an HTML page using $.ajax when clicking a button. I want to retrieve data from the server in either JSON or text format but for some reaso ...

javascriptjqueryhtmlajaxnode.js

(Critical) Comparing AJAX GET Requests and HTTP GET Requests: identifying the true client

When a typical GET request is made through the browser, it can be said that the browser acts as the client. However, who exactly serves as the client in the case of a GET request via AJAX? Although it still occurs within the browser, I am intrigued to delv ...

javascriptajaxhttpclient-server

Using jQuery to open a new window and automatically inputting a value into the textbox

I've been struggling with a basic concept for hours now and all my Google searches have turned up empty. I'm working with an HTML file that contains a div which, when clicked, should open a new window. In this new window, the input box should dis ...

javascriptjquery

Leverage information stored in an array within the HandsonTable Angular directive

Some of my columns in a HandsoneTable created using Angular directives are not rendering when I try to use an array as the data source with common array notation (name[0]). I'm unsure if this is supposed to work like this or if I am doing something wr ...

javascriptangularjshandsontable

Data is not loaded until after the HTML for the Nuxt page has been

My issue is that I have a dynamic page where product details are loaded, but the html code loads before the data. This results in errors when trying to use static elements like images because the "product" object does not exist. To address this problem, I ...

javascriptvue.jsnuxt.jspugstore

Retrieving the date input from a React form powered by Bootstrap

Is there a way to extract a specific timestamp in the format yyyy-mm-dd from the code snippet below? handleDateChange = e => {} <Form.Group as = {Col}> <Form.Control type = "date" value = { this.state.closingDate } onChange = { ...

javascriptreactjs

What is the best way to retrieve the data from this date object?

How can I access the date and time in the code below? I've attempted using functions within the Text block without success. It's unclear to me what mistake I'm making or how to correctly access this object, or transform it into an object th ...

javascriptreactjsreact-nativemobile

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

javascriptjqueryhtmlcssajax

Angular.js is a great tool for showing PDF files on a

I am facing a challenge while trying to incorporate a PDF file into my Angular.js website. The PDF is stored as a blob in a MySQL database and I want to display it as one of the partial views that appear on the main page when a link is clicked. Unfortuna ...

javascriptangularjspdf

When the button is clicked, the image vanishes into thin

One common issue is the image disappearing when users click on the Rotate Anti-clockwise or Rotate Clockwise buttons. This can be a frustrating problem to tackle! Check out this link for more information. If you run into this issue, here are some tips: ...

javascriptangularjsangularjs-directive

Using a custom module in node.js to retrieve data from a mysql database

How can I retrieve select query results? I am currently getting empty or null responses. Despite attempting callback logic and using the callback function as suggested in some articles, I have yet to have any success. All of the code for my Custom Module ...

javascriptnode.jsexpress

Is there a way to prevent the back button from functioning in my web browser?

How can I prevent the back button from being used on my webpage? Can you provide a list of possible methods to achieve this? if($data->num_rows > 0){ while($row = $data->fetch_assoc()){ header('Location:../cashier.php&apo ...

javascriptphphtml

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

javascripthtmlcssvue.js

Modifying button appearance upon clicking using JavaScript

JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...

javascripthtmlcssangularjs

Python responding to an Ajax request using jQuery

Currently, I am experimenting with integrating a pre-built inline editor from the following source: https://github.com/wbotelhos/inplace Regrettably, the available support documentation is lacking and my expertise in Javascript, jQuery, or Ajax is limited ...

javascriptpythonjqueryflask

The expected functionality of setTimeout is not being achieved

I have implemented an ajax scroll down feature in my application to load user posts. However, I am facing an issue where the for loop iteration is causing excessive loading time, leading to browser freezing until the results are displayed. To address this ...

javascriptjqueryajax