Validating No Page Reload Using Custom Code

Overview

When testing modern web applications, especially Single-Page Applications (SPAs), it is often necessary to verify that certain user actions, like clicking a link, do not cause an unintended full-page reload. A full-page reload resets the JavaScript execution context and re-renders all elements on the page. This document outlines two methods using custom JavaScript to validate that a page has not been reloaded.

How It Works

You can detect a page reload by checking if the JavaScript execution context is preserved or by verifying that static DOM elements have not been re-rendered. The first method is generally more reliable.

Method 1: Checking for JavaScript Context Reset

This is the most reliable approach because a page reload will always reset the JavaScript context, clearing any global variables you have set. The validation involves two custom code steps.

Set a JS Marker: Before the action that might cause a reload, use a custom code step to set a variable on the global window object.
```
window.__noReloadCheck = Date.now();
```
Validate the Marker: After the action, use a second custom code step to check if the marker still exists. If it is undefined, the page has reloaded, and the code can throw an error to fail the test step.
```
if (typeof window.__noReloadCheck === "undefined") {  throw new Error("Page reload detected. JS context was reset.");}return true;
```

Method 2: Comparing DOM Element References

This method checks if static elements, like a header or footer, have been re-rendered. If a page reloads, new DOM objects are created with new memory references. A strict comparison (===) will fail if the element has been re-rendered.

Store Initial Element References: Before the action, use custom code to store the DOM nodes for static elements in global variables.

// Replace with your actual CSS selectorswindow.headerRef = document.querySelector('.your-header-selector');window.footerRef = document.querySelector('.your-footer-selector');

Compare Element References: After the action, retrieve the current elements and perform a strict comparison against the stored references. The step returns true if the references are identical, indicating no reload.

// Replace with the same selectorsconst currentHeader = document.querySelector('.your-header-selector');const currentFooter = document.querySelector('.your-footer-selector');// Returns true if references are the samereturn currentHeader === window.headerRef && currentFooter === window.footerRef;

Limitations

Browser UI Inaccessibility: Due to browser security restrictions, it is not possible to access or validate browser UI elements like the address bar or the reload button using JavaScript.
Stable Selectors: The DOM element comparison method relies on stable and unique CSS selectors. If the application's code changes, these selectors may need to be updated.
Scope of DOM Check: The DOM element method only validates if the container elements themselves are replaced. It does not detect dynamic changes to the content within those containers if the containers are not re-rendered.

Related Info

Single-Page Applications (SPAs): These techniques are particularly useful for testing SPAs, where client-side navigation should not trigger full-page reloads.
DOM APIs: The methods use standard browser JavaScript and DOM APIs, including document.querySelector, the window object, and the strict equality operator (===).

Search