How to change the name of an element in Locator & Pages?

Replace element name via JavaScript

Last updated on November 21st, 2022

This article explains how to replace the naming of an element on a Location Page on the example of the email address.

Disclaimer

The following attempt was created and tested with a certain Locator and Pages version. Please note, that this solution might not be supported at a given point in future and we do not guarantee support for it.

Replace email address via Javascript

This attempt uses JavaScript to replace the naming of an element with a pre-defined text. In this example the email address will be replace by a generic text "Contact us".

The script

window.setInterval(function() {
    Array.from(document.getElementsByClassName('ubsf_details-email')).forEach(function(el) {
        var innerLink = el.querySelectorAll('a')[0];
        innerLink.text = 'Contact us';
    });
}, 500);

The above script selects the element 'ubsf_details-email' and replaces it the innerLink.text with the desired input - in this example "Contact us".

Examples

Fiddle with exposed JavaScript: https://jsfiddle.net/n81r2dxv/1/

Fiddle with uploaded JavaScript: https://jsfiddle.net/n81r2dxv/2/


Apply to other elements

The above concept could be applied to other elements as well. In order to do so, replace the ('ubsf_details-email') in document.getElementsByClassName with the element you want to edit the text for.

Change text

The used text can be changed by editing the value of the innerLink.text.


Read next: Locator & Pages - JavaScript to preselect a Filter

Was this article helpful?

Save as PDF