Share this page

# Work with dynamic tables

Web content from a server or database is often displayed in HTML tables. The content of the table can change at any time. You may want to create a script that automatically manipulates dynamic data.

In this topic:

## Find an object in the DOM and perform an action

The following example demonstrates how you can use object identification to find an object in the DOM and perform an action using object identification methods.

The following table summarizes the pages and scripts used in the example:

Example description | HTML pages | Page Description | Example scripts
--- | --- | --- | ---
The HTML page generates a table with a random number of rows. The first column of each row contains a checkbox which is randomly checked. One of the cells has a gray background. The script automatically toggles the state of the checkbox in the grayed cell. | table1.html | Generates a table with a random number of rows every time you click the Refresh button. | table1_2.zip

To find an object in the DOM and perform an action:

1. Record navigation to table1.html.
2. Click Step in the toolbar, select Miscellaneous and drag a Evaluate JS on Object step to the required location in the script.
3. Click Choose an object in the step and highlight the grayed cell in the table.

4. Change the ID Method

   Use JavaScript ID method:

   In the Object section, set the Id method to JavaScript. In the JavaScript text box, add the following code:

       function findCheckBox(){
             //get all checkbox elements using XPath
             var checkboxes = evalXPath("(//input[@type=\"checkbox\"])");
             // iterate over the checkboxes collection to find which reside in a table cell (TD) colored in gray
             for (var i = 0; i < checkboxes.length; i++) {
                if ((checkboxes[i].parentNode.tagName == 'TD') &&
                   (checkboxes[i].parentNode.style.getPropertyValue("background-color") === "rgb(170, 170, 170)")) {
                    //return checkbox with gray background
                    return checkboxes[i];
                }
           }
       }

       //execute findCheckBox()
       findCheckBox();

   This code creates a function and a function call. The function determines which of the cells in the table is gray, which is the consistent characteristic in the table, and returns the checkbox DOM object.

   Use Descriptors ID method:

   In the Object section, set the Id method to Descriptors. You can view the object properties by clicking "Click here to edit".

5. In the Arguments section of the step add the following code:

       //for JS
       object.checked = !object.checked;
       // for Descriptors
       object.firstChild.checked = !object.firstChild.checked;

   The 'object' refers to the DOM object that was found in Step 4.

   This code switches the status of the checkbox.

6. Replay the script.

Back to top

## Find an object and perform an action if a condition is met

The following examples show you how you can use object identification to find an object and perform an action if a condition is met using object identification methods.

The following table summarizes the pages and scripts used in the examples:

Example description | HTML pages | Page Description | Example scripts
--- | --- | --- | ---
The HTML generates a table with a random number of rows. The first column contains a “Submit Data” button. The second column displays a status, as a string, either “Open” or “Close”. If the status is open, clicking “Submit Data” button updates the status to “Close". If the status is closed, clicking “Submit Data” button updates the status to “Error”. In the example you see how to create a script that automatically updates the rows with a status of "Open" to "Close". | table2.html | Generates a table with a random number of rows every time you click the refresh button. | Table2Descriptors_2.zip Table2XPath_2.zip

To find an object using descriptors:

1. Record navigation to table2.html.
2. To determine the number of rows that have been generated, add an Evaluate JS on Object step.
   1. Select the table as the object.

   2. To store the number of rows of the table in the 'rows', add the following code in the argument section.

      var rows = object.rows.length;

3. Change the ID Method to Descriptors or XPath on the Evaluate JS on Object

   If you change the ID Method to Descriptors, click the Edit button and remove the text property.

4. Click Step in the toolbar, select Flow Control and drag a For Loop step to the required location in the script.

   Change the arguments of the init section of the for loop to:

   var i = 1 , Condition: i <= rows

5. Click Step in the toolbar, select Flow Control and drag and drop an If Exists step inside the For Loop step.

   1. Select a cell where the status is set to "Open".

   2. Change the ID Method to Descriptors and verify that the Object Ordinal is set to 1.

6. Click Step in the toolbar, select Miscellaneous and drag and drop an Evaluate JS on Object step inside the If Exists step.

   1. Select a cell where the status is set to "Open"

   2. Add the following code to the Arguments section:

      var theOpenText = object;

7. Click Step in the toolbar, select Miscellaneous and drag and drop an Evaluate JavaScript step inside the If Exists step.

   Add the following code to the Arguments section:

       //From the ‘Open’ text  node, extract the corresponding Submit Data button relying on the DOM structure. After you get the Submit Data button DOM object, click on it.
       var clickOn = theOpenText.previousSibling.firstChild;
       clickOn.click();

8. Click Step in the toolbar, select Flow Control and drag and drop a Break step in the Else section of the If Exists step.

   On the last iteration, TruClient will search for a cell with a status of "Open". Since it will not find one it will break form the loop. The search ends when the object times out.

To find an object using XPath:

1. Record the following script:

   1. Navigate to table2.html.
   2. Click the Submit button in a row that has a status of "Open".
   3. Click Stop Recording.

2. To determine the number of rows that have been generated, add an Evaluate JS on Object step.

   1. Select the table as the object.

   2. To store the number of rows of the table in the 'rows', add the following code in the argument section.

      var rows = object.rows.length;

3. Change the Method ID to Descriptors or XPath on the Evaluate JS on Object

   If you change the ID Method to Descriptors, click the Edit button and remove the text property.

4. Click Step in the toolbar, select Flow Control, add an If Verify step, and select a cell that has a status of "Open" as the object.

5. Cut the "Click on Submit' button and paste into the If Verify step.

6. Select Group Into > For Loop Clause to surround the If Verify step with a For Loop step.

7. Change the arguments of the For Loop to:

   var i = 1 , Condition: i <= rows

8. In each iteration, the XPath of the object is used to find the next "Open" text to update to "Closed". The 'i' identifier is used to get the current row of the table.

   Tip: You can select XPath as the ID Method and copy the DOM structure syntax to an editor.

   Change the ID method of the If Verify to JavaScript and add the following code:

   evalXPath("//table[@id='mytable']/tbody/tr[" + ArgsContext.i + "]/td[2]");

9. Change the ID method of the Submit data to JavaScript and add the following code:

   evalXPath("//table[@id='mytable']/tbody/tr[" + ArgsContext.i + "]/td[1]/input");

Back to top

https://admhelp.microfocus.com VuGen,Professional Performance Engineering,Performance Engineering for Developers 8942
Tips to improve your search results... OpenText™ Virtual User Generator Help Center OpenText™ VuGen Help 26.1 All View Local Help Center View Online Help Center Version: