Testing kendoGrid data using cucumber capybara - selenium

Question

I'm attempting to write some cucumber/capybara tests to validate data in a KendoGrid UI component and am having some real trouble determining how to select and validate the data on the page.
I've found the basic tutorials and examples on utlizing cucumber/capybara with table data but it appears that KendoGrid utilizing a slightly different configuration of it's tables and data where 1.) there is no "id" to easily select the grid on the page and 2.) there are multiple tables (one for the header) and another for the actual data itself.
Here is an excerpt of my current kendoGrid data I want to check:
<div id="item_grid" data-role="grid" class="k-grid k-widget k-secondary" style="">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th role="columnheader" data-field="ItemA" data-title="Item A" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item A</a>
</th>
<th role="columnheader" data-field="ItemB" data-title="Item B" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item B</a>
</th>
<th role="columnheader" data-field="ItemC" data-title="Item C" class="k-header" data-role="sortable">
<a class="k-link" href="#">Item C</a>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr data-uid="2c77ea57-50ea-474d-950a-8379b3690936" role="row">
<td role="gridcell">A</td>
<td role="gridcell">223.63</td>
<td role="gridcell">0</td>
</tr>
<tr class="k-alt" data-uid="979534bc-7dea-47e9-9471-088c5bffe5b5" role="row">
<td role="gridcell">B</td>
<td role="gridcell">223.63</td>
<td role="gridcell">180</td>
</tr>
<tr data-uid="4d4c31e7-4daf-44ad-b6c1-20ffdfde57c4" role="row">
<td role="gridcell">C</td>
<td role="gridcell">143.58</td>
<td role="gridcell">0</td>
</tr>
<tr class="k-alt" data-uid="8d315558-b014-4219-b21b-dbe52cc6dd18" role="row">
<td role="gridcell">D</td>
<td role="gridcell">143.58</td>
<td role="gridcell">180</td>
</tr>
</tbody>
</table>
</div>
</div>
Where is the best place to start for writing tests to cover this scenario?
I have done some additional playing with the Telerik Test Studio and testing this specific scenario in that application is extremely easy!

Answer 1

One approach would be to collect the table of data into a 2D array using:
data_rows = page.all(:css, 'div#item_grid div.k-grid-content tr')
data = data_rows.collect do |tr|
tr.all(:css, 'td').collect(&:text)
end
p data
#=> [["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]]
Then with the data (and assuming you know what data should be in the table), you can validate the data array:
# If you want to validate the entire table and row order matters:
expect(data).to eql([["A", "223.63", "0"], ["B", "223.63", "180"], ["C", "143.58", "0"], ["D", "143.58", "180"]])
# If you want to validate the entire table and row order does not matter:
expect(data).to match_array([["B", "223.63", "180"], ["A", "223.63", "0"], ["D", "143.58", "180"], ["C", "143.58", "0"]])
# If you want to validate a specific row exists:
expect(data).to include(["B", "223.63", "180"])