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.

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.

Try it out!

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 check box which is randomly checked. One of the cells has a gray background. The script automatically toggles the state of the check box in the grayed cell.

table1.html

 

Generates a table with a random number of rows every time you click the Refresh button.

table1.zip

 

  1. Record navigation to table1.html.
  2. From the Toolbox add a Miscellaneous > Evaluate JS on Object step.
  3. Click in the step and highlight the grayed cell in the table.
  4. Change the ID Method

  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 check box.

  6. Replay the script.

Back to top

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

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

Try it out!

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

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.zip

Table2XPath.zip

Use 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 Method ID to Descriptors or XPath on the Evaluate JS on Object

    If you change the ID Method to Descriptors, select "Click here to edit" button and remove the text property.

  4. From Toolbox > Flow Control add a For Loop step.
    1. Change the arguments of the init section of the for loop to: Init:

      var i = 1 , Condition: i <= rows

  5. From the Toolbox > Flow Control add 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. From the Toolbox > Miscellaneous, add 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. From the Toolbox > Miscellaneous, add 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. From the Toolbox > Flow Control, add 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.

Use XPath

  1. Record the following script:

    1. Navigation to table2.html
    2. Click the a 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 method Id to Descriptors, select "Click here to edit" button and remove the text property.

  4. From the Toolbox, add an If Verify step and select an text 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, we are using the XPath of the object to find the next "Open" text to update to "Close". We use the 'i' identifier 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