Javascript: Find all the Grid Column Names

Question

How do I use Javascript to find role = ColumnHeader below, and then the Text field underneath it (ProductNumber)?

Basically trying to collect all the grid column names into an array, for Test Automation.

Resource:

Javascript: Select all data-qa attributes on HTML Page

Answer 1

You can use querySelectorAll,

 var colHeaders = document.querySelectorAll('[role = ColumnHeader]');

It will select all the elements in the DOM with the given selectors.

Now to get all the name of the column header, you can do the following,

var colHeaderNames = [];
document.querySelectorAll('[role = ColumnHeader] > .k-link').forEach(item => colHeadersNames.push(item.innerText));