retca01

App Synthetic Monitor (ASM): Using JavaScript to Enhance Real Browser Monitoring (RBM) – Part 3

Blog Post created by retca01 Employee on Apr 9, 2015

In Part 1, we learned how to reference objects on the page using a JavaScript reference and programmatically interact with the page by inserting the JScript step from the CA ASM Recorder Toolbox. We continued using this same technique in Part 2 to leverage JavaScript to generate and insert the current date into a date input field.

 

In today’s post, we will discuss how to use JavaScript to validate the existence of content on the page. In many cases, you can use the standard out-of-the-box content check (aka easy assertion) to validate text on the page to make sure the web site is working. ASM uses this to determine if the page or user transaction is available and performing correctly. If the check fails, the transaction fails and ASM logs this as a failure.

 

But what happens if the same text appears on the screen multiple times? How do you know if the script is checking the correct instance of the text you want to validate?  What if the instance of the text you are checking for is missing, but the text still displays somewhere else on the page causing ASM to incorrectly log a passed check?

In today’s scenario we will address these challenges using the JScript Check step.

 

Scenario 3: Validate text in a table for a specific row.

In the example below we have an HTML data table that contains sample employee information. Each row has six columns (name, position, office, age, start date, salary).

 

Pic 8a.png

 

Notice there are multiple instances of the same text (“Software Engineer”, “London”, “New York” and “San Francisco”). In this scenario we want to verify that Bruno Nash’s office location is London.

 

The script below navigates to the page that contains the HTML table and executes a JScript Check to verify Bruno Nash’s office location.

 

Please note, this is a fictitious example to show you how to iterate through a HTML table and check for specific text in the table.

 

Pic 8aa.png

 

In order to programmatically interact with the table, we need to reference it. The CA ASM Recorder identifies objects on a page using an “Element Reference.” This reference can be expressed in JavaScript. This time we will use the Recorder’s DOM (Document Object Model) window to capture this JavaScript reference

 

From the menu select View -> DOM Window

 

Pic 8b.png

 

 

 

Pic 9.png

 

 

The DOM window displays an overview of the objects in the page. It allows you to drill down through the hierarchy of objects and locate the element you want to programmatically interact with.

 

Pic 10.png

 

In the DOM window above we can see the HTML table, the row (TR) that contains Bruno Nash’s employee information and the cell (TD) that contains the office location.

 

Please Note: When you select an element in the DOM list, the ASM Recorder will draw dotted lines around the element in the page to help ensure you have located the correct element.

 

Next, capture the JavaScript Element Reference for the table by right-clicking on the table and selecting “Generate JScript Reference”. The JavaScript Element Reference will be saved to the clipboard for you to paste in the JScript Check editor.

 

Pic 11.png

 

Drag the JScript Check icon from the “Tools” panel into your script as shown below.

 

Pic 11b.GIF

 

 

The JScript Check editor should automatically open. If not, expand the step (click on plus) and double-click on the sub-step to open the editor.

 

Next paste the JavaScript reference into the editor.  You will eventually reference this table in your JavaScript code (var table=document.getElementById('example');).  Or just paste the entire code snippet below.

 

Code Snippet:

//Check Bruno Nash's office location in the table

//---------------------------------------------------------

//---------------------------------------------------------

//---------------------------------------------------------

//---------------------------------------------------------

//pass the table object into a variable using the java script reference

var table=document.getElementById('example');

var chkresult

 

//iterate through each row in table

for(var i=0; i<table.rows.length;i++)

               {

        var str_wc = table.rows[i].cells[0].innerHTML;

              

               if (str_wc == "Bruno Nash") //Check for Bruno Nash

                              {

                              if (table.rows[i].cells[2].innerHTML== "London") //Check Bruno Nash's Office location

                                             {

                                             chkresult = true;

                                             break; //If a match is found terminate loop and set result to true

                                             }

                              }

               if (table.rows.length = i) //Check fails if no match is found in the table

                              {

                              chkresult = false; // Set result to false

                              }

               }

return chkresult

 

Please Note:  I’m iterating through each row of the table, instead of referencing the current row that contains Bruno Nash’s employee information. This is because the number of rows in the table may change and Bruno’s row placement in the table may vary.

 

Pic 12a.png

 

Click “Ok” and play the script back to ensure that it works. Next, upload the script to your ASM account.

 

JavaScript reference material:

http://www.w3schools.com/jsref/default.asp

Sample Script: Check Text in Table (Example Only)

 

Thank You,

Carlton

Outcomes