Search

Interacting with Tables Using Custom JavaScript

Overview

Standard assertions may not always be sufficient for interacting with or validating data within dynamic tables, especially those with a variable number of rows. For comprehensive validation or dynamic interaction based on headers and row values, a custom JavaScript code step provides the necessary flexibility.

How It Works

You can use a Custom Code step within your test to scan an entire table, capture its data into a 2-D array, and store it in a Functionize variable for later use. This allows for dynamic validations and interactions with specific cells.

Below is a sample custom code snippet that demonstrates how to fetch data from a table:

function getTableData() {
    const table = document.getElementById("table2");
    const rows = table.querySelectorAll("tbody tr");
    
    let tableData = [];

    rows.forEach(row => {
        let rowData = [];
        const cells = row.querySelectorAll("td");

        cells.forEach(cell => {
            rowData.push(cell.innerText.trim());
        });

        tableData.push(rowData);
    });

    return tableData;
}

// Store the entire table's data in a local variable
fze.local.fetchedData = getTableData();

// Example: Fetch a specific value (email from row 2, column 3)
fze.local.details = fze.local.fetchedData[1][2];

Explanation of the Code:

  1. The script first locates the table on the page using its ID (in this case, table2).
  2. It then retrieves all rows (<tr>) from the table's body (<tbody>).
  3. For each row, it iterates through all the cells (<td>) and collects the text from each one.
  4. The values from each row are stored in an array, and all row arrays are collected into a single 2D array, representing the complete table data.
  5. The full table data is saved to a local variable, fze.local.fetchedData, making it accessible in subsequent test steps.
  6. You can then access specific data points using array indices. For example, fze.local.fetchedData[1][2] retrieves the value from the second row and third column (since arrays are zero-indexed).

Limitations

The provided JavaScript is an example and must be adapted to fit the specific structure of the table in your application. You may need to change the selector used to find the table (e.g., using a class name or a more complex CSS selector instead of an ID) and adjust for different table structures (e.g., tables without a <tbody> element).