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