How to include attribute(s) from object name (Web)

Last edited on

Overview

Squish generates object name during the recording process.
However for various reasons, sometimes there might be a need to include some custom/extra attribute(s) during the object name generation process.
Here we will show you some of the ways to do that.
NOTE: This information is specifically for Squish for Web.

How to include "placeholder" attribute where the "TAG" is "INPUT" and "type" is "password" from object name

Excluding "name" attribute while Squish generates object name.
NOTE: The same concept can be applied for other attributes of your need.

This is possible by creating a custom extension. And the steps are as follows:

  1. Create Javascript file (ex: myextension.js) under the path "lib/extensions/web" which is located on the Squish installation path.
  2. Create a custom function (ex: myUiExtension.nameOf) which invokes "Squish.nameOf".
    "Squish.nameOf" returns the real (multi-property) name of the given element in String format.
    https://doc.qt.io/squish/web-squish-object.html#string-squish-nameof-objectorname
  3. Obtain name & value pair of the desired attribute by invoking "propertiesToName". In this example the "placeholder" and its associated value.
    https://doc.qt.io/squish/web-squish-object.html#string-squish-propertiestoname-objectorname-listofpropertynames
  4. By using String manipulation, append the desired property name & value pair to the real name.
  5. Register that custom function to "Squish.addNameOfHook". https://doc.qt.io/squish/web-squish-object.html#squish-addnameofhook-function

The custom function code looks something like this.

~ snip code ~
var myUiExtension = new Object;

myUiExtension.nameOf = function(obj) {
    if (obj.tagName == "INPUT") {
        var tmp = Squish.nameOf(obj, true); // This returns the real (multi-property) name of the given element in String format. (https://doc.qt.io/squish/web-squish-object.html#string-squish-nameof-objectorname)
        var unEsMsg = unescape(tmp); // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape
                                     // Before "unescape" %7Bvisible%3D%27true%27%20tagName%3D%27INPUT%27%20name%3D%27or2sqjv%27%20type%3D%27text%27%7D
                                     // After  "unescape"  {visible='true' tagName='INPUT' name='or2sqjv' type='text'}
        var result = unEsMsg;
        if (obj.type == "password") { // Make sure the desired property name & value pair is added according to desired condition(s).
            const props = Squish.propertiesToName(obj, ["placeholder"]); // This returns the property name & value pair for the given property name list. (https://doc.qt.io/squish/web-squish-object.html#string-squish-propertiestoname-objectorname-listofpropertynames)
            result = result.slice(0, -1) + " " + props + " }"; // Append the desired property name & value pair to the real name.
        }

        return escape(Squish.uniquifyName(result, obj));
    }
    return undefined;
}

Squish.addNameOfHook(myUiExtension.nameOf, true); // Register that custom function to "Squish.addNameOfHook". (https://doc.qt.io/squish/web-squish-object.html#squish-addnameofhook-function)
~ snip code ~

For instance following is an example of adding custom extension.

Object Name Before:

test_or2sqk1_password = {"container": test_BrowserTab, "id": "or2sqk1", "name": "or2sqk1", "tagName": "INPUT", "type": "password", "visible": True}

Object Name After:

test_or2sqk1_password = {"container": test_BrowserTab, "id": "or2sqk1", "name": "or2sqk1", "placeholder": "Enter Password", "tagName": "INPUT", "type": "password", "visible": True}

For reference attached the test html page and the custom extension file. test.html myextension.js