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

 

  1. Record navigation to table1.html.
  2. Click Step in the toolbar, select Miscellaneous and drag a Evaluate JS on Object step to the desired 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

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

Table2XPath_2020.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 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 desired location in the script.

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

    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.

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 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, 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