Search code examples
cssrobotframeworkplaywright

Get the list of items in table


This is regarding Robot Framework scripting.

I want to get the items in the column "Model Name" and then verify user clicks on column header to sort the items correctly.

How do I get the list of items? The items reside in <span class=""> , sample HTML at below:

screenshot

<tr data-row-key="254104e218ea47f9879a270a3b688da3"
    class="ant-table-row ant-table-row-level-0">
<td class="ant-table-cell ant-table-row-expand-icon-cell">
    <button type="button"
            class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
            aria-label="Expand row">
    </button>
</td>
<td class="ant-table-cell ant-table-column-sort">
    <span><span class="">autotestmodel-0844-v1-8k</span></span>
</td>
...
</tr>


Solution

  • You can try CSS selector on the "nth" child inside the 2nd <td> element within each row.

    document.querySelectorAll('table tr td:nth-child(2)');
    

    This will let you iterate over each <td> element, that is placed in the 2nd place in its <tr> container, and return a node list of all the relevant cells. On this node list you can then iterate and use the inner text as you wish.

    document.querySelectorAll('table tr td:nth-child(2)').forEach( item => {
      // do whatever you want with each node's text
      console.log(item.innerText);
    })