Useful smartags workbench custom actions and other js examples

You should be familiar with the information in Understanding your Application ( with SmartTags ) before reading this topic.

GetName Custom Actions

Get element text including the text of its children nodes.

Notice the replace regular expression used to remove all line feeds and tabs characters.

Copy

return ds$(element).text().replace(/(\r\n|\n|\r|\t)/g, "").trim();

Use aria-label attribute value as the name.

Notice validating for undefined results so in case of misuse of the action it can be easily identified.

Copy

var thename = ds$(element).attr('aria-label');
if (typeof thename === 'undefined') { 
  thename = "SMARTAG_ACTION_ERROR ARIA_LABEL IS UNDEFINED!"; 
}
return thename;

Get only the current node element text.

This action does return the current element node text without adding the text of its children nodes. If you apply this to a SmartTag that targets a span(“Yes“), this will make sure your SmartTag only focuses on the actual span that has the “Yes” text and not on its span’s parents.

Copy

return ds$(element)
            .clone()    //clone the element
            .children() //select all the children
            .remove()   //remove all the children
            .end()  //again go back to selected element
            .replace(/(\r\n|\n|\r|\t)/g, "")
            .text().trim();

Get element name from one of the element’s attributes

The following template can be used to set a general getName function that checks for an attribute to get its value, but if it does not have that attribute then it tries with another one. Modifying the code can change the order in which the attributes get fetched or add more attributes.

getName using list of accessors to try in an array

Copy

var theElement = ds$(element);

// attributes to try and in a given order
let arr = ["name", "placeholder"];

for (let i = 0; i < arr.length; i++) {
    try {
    var accessorValue = theElement.attr(arr[i]);

    if (typeof accessorValue !== 'undefined') {
      accessorValue = accessorValue.trim().replace(/(\r\n|\n|\r|\t)/g,"");
      break;
    }
  } catch(e) {
   // maybe the element doesn't contain the attribute
  }
}

if (typeof name === 'undefined') {
     accessorValue = "UNKNOWN";
}

return accessorValue;

getName using sequential logic, checking accessors until a value is found

Copy

var name = ds$(element).attr('id');
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("value");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("name");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("placeholder");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("data-ref");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
   name = ds$(element).text().trim();
}
if (typeof name === 'undefined') { name = "UNDEFINED"; }
return name.replace(/(\r\n|\n|\r|\t)/g, "").trim();

Get element name from one label element higher in DOM hierarchy (if it exists)

The following template can be used to set a general getName function that checks for label element that is higher in the DOM hierarchy, if that label is found in the expected location then its text is returned otherwise returns the id of actual element.

Copy

var name = ds$(element).attr('id');
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("value");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("name");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("placeholder");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
  name = ds$(element).attr("data-ref");
}
if (typeof name === 'undefined') { name = ""; }
if (name === "") {
   name = ds$(element).text().trim();
}
if (typeof name === 'undefined') { name = "UNDEFINED"; }
return name.replace(/(\r\n|\n|\r|\t)/g, "").trim();

Click Custom Actions

Find first anchor inside the element and click it

Copy

_ds.click(ds$(element).find('a')[0]);

JS Validations

Validating the browser URL

This validation gets the smartag name which in the below example looks like collection('/albums/12423'), and then extracts the numeric code from the name. Then in the $thepageurl stores the browser’s URL, which should contain the same numeric code as in the smarttag name.

Copy

var $code = $elem.name.substring($elem.name.lastIndexOf('/'), $elem.name.lastIndexOf("'"));
var $thepageurl=evalAndReturn('return window.location.pathname');
assertTrue($thepageurl.contains($code));

Sample Extraction Actions

Extracting the price from https://demosite.appvance.com product

Assuming you have a smartag that points to the highlighted div below, then you can use jquery sintax to find and extract the text of the price for that product.

return ds$(elem).find('span .price').text().trim();

Solutions to Common Test Designer IDE Challenges

Numbers: convert a string value to an integer number

Copy

// Suppose you have a span with the value $19.99 but you need validate the number is greated than 15.

Store                |  $stringValue    |  getText(span("carttotal"))     // "$19.99"Store                |  $floatingValue  |  parseFloat($stringValue.substring(1))   // removes the $ then convertes "19.99" to a floating number 
Assert Greater Than  |  $floatingValue  |  15

Numbers: convert parts of a string value to a floating number

Copy

// When needing to perform math operation so often you need to convert a number in string format to an actual integer 

Store   |   $integerValue   |   parseInt(span("item-quantity"))

Tables: getting the number of rows in a table using ds$

Copy

// Assuming the table has an id myTable you can get the number of rows in the IDE using: 

Store  |  $rowsQuantity  |  _eval("ds$('#myTable tbody > tr').length")

Tables: getting the column index with a given header using ds$

Copy

// You can use the jQuery index() function to find the column index of a table that contains certain text "MyHeader". REF: https://api.jquery.com/index/

Store  |  $rowsQuantity  |  _eval("ds$('thead th:contains(MyHeader)').index()")+1

Tables: Iterate over a table to process all the cells values of a given column using ds$

Copy

// If you need to iterate over a table column to process the contents of a certain column you can use above functions to get the total number of 
// rows in the table and the column that has the appropiate heade and then:

Store   |  $rowIndex                  | 1
While   |  $rowIndex < $rowsQuantity
  Store |  $cellValue                 |  _eval("ds$('tbody tr:nth-child("+$rowIndex+") td:nth-child("+$columnIndex+")').text()")
  ... do something with $cellValue ...
  Store |  $rowIndex                  |  $rowIndex + 1
End While