Work with dynamic tables

Web content from a server or database is often displayed in HTML tables. Each time the page refreshes, the content of the table can change. 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:

    "object.checked = !object.checked;" //for JS

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

    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 exists

The following example shows you how you can use object identification to find an object and perform an action if a condition exists 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 method Id to descriptors, select "Click here to edit" button and remove the text property.

  4. From Toolbar > 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 Toolbar > Flow Control add an IfExists 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 Toolbar > 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 Toolbar > Miscellaneous, add an Evaluate JavaScript step inside the If Exists step.

    Add the following code to the Arguments section:

    var clickOn = theOpenText.previousSibling.firstChild; //From the ‘Open’ text  node extract the corresponding Submit Data button relying on the DOM structure. After  we get the Submit Data button DOM object, click on it.
    clickOn.click();
    
  8. From the Toolbar > 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 a If Verify step and select an text as the object.
  5. Cut the "Click on Submit' button and paste into the IfVerify step.
  6. Select Group Into > ForLoop Clause to surround the IfVerify step with a ForLoop step.
  7. Change the arguments of the ForLoop 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 IfVerify 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