TestCafe - How to get index number of table with tag "th" using class name

Question

I am trying to get link table header columns with body columns because the columns are configurable and the order keep changing. Only way to identify is class name given only in header part. If I will get the index number using class name then I can use that index to get the value from body. I am able to fetch the class name using getElementsByTag('th').nth(i).classNames. Is there any way to achive something like this - getElementsByClassName('.column-name').index ?

This is my table looks like -

<tr>
    <th class="column-name" >
        <span>Name</span>
    </th>
    <th class="spark-text-center column-age">
        <span>Age</span>
    </th>
    <th class="spark-text-center column-gender">
        <span>Gender</span>
    </th>
    <th class="spark-text-center column-status">
        <span>Status</span>
    </th>
</tr>

in Selector file - // export const SELECTOR_TABLE_HEADER_CLASS = class => Selector(thead tr th.${class});

in test -

console.log(await SELECTOR_TABLE_HEADER_CLASS('column-name').index); // giving undefined

Answer 1

The functionality you require is not supported by default. You can extend selectors with custom properties and methods. Please refer to this and this threads for examples.