title: Testing kendoGrid data using cucumber capybara
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is an excerpt of my current kendoGrid data I want to check:</p>
  
  <pre><code>&lt;div id="item_grid" data-role="grid" class="k-grid k-widget k-secondary" style=""&gt;
    &lt;div class="k-grid-header" style="padding-right: 17px;"&gt;
      &lt;div class="k-grid-header-wrap"&gt;
        &lt;table role="grid"&gt;
          &lt;colgroup&gt;
            &lt;col&gt;
            &lt;col&gt;
            &lt;col&gt;
          &lt;/colgroup&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th role="columnheader" data-field="ItemA" data-title="Item A" class="k-header" data-role="sortable"&gt;
                &lt;a class="k-link" href="#"&gt;Item A&lt;/a&gt;
              &lt;/th&gt;
              &lt;th role="columnheader" data-field="ItemB" data-title="Item B" class="k-header" data-role="sortable"&gt;
                &lt;a class="k-link" href="#"&gt;Item B&lt;/a&gt;
              &lt;/th&gt;
              &lt;th role="columnheader" data-field="ItemC" data-title="Item C" class="k-header" data-role="sortable"&gt;
                &lt;a class="k-link" href="#"&gt;Item C&lt;/a&gt;
              &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="k-grid-content"&gt;
    &lt;table role="grid"&gt;
      &lt;colgroup&gt;
        &lt;col&gt;
        &lt;col&gt;
        &lt;col&gt;
      &lt;/colgroup&gt;
      &lt;tbody&gt;
        &lt;tr data-uid="2c77ea57-50ea-474d-950a-8379b3690936" role="row"&gt;
          &lt;td role="gridcell"&gt;A&lt;/td&gt;
          &lt;td role="gridcell"&gt;223.63&lt;/td&gt;
          &lt;td role="gridcell"&gt;0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="k-alt" data-uid="979534bc-7dea-47e9-9471-088c5bffe5b5" role="row"&gt;
          &lt;td role="gridcell"&gt;B&lt;/td&gt;
          &lt;td role="gridcell"&gt;223.63&lt;/td&gt;
          &lt;td role="gridcell"&gt;180&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr data-uid="4d4c31e7-4daf-44ad-b6c1-20ffdfde57c4" role="row"&gt;
          &lt;td role="gridcell"&gt;C&lt;/td&gt;
          &lt;td role="gridcell"&gt;143.58&lt;/td&gt;
          &lt;td role="gridcell"&gt;0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="k-alt" data-uid="8d315558-b014-4219-b21b-dbe52cc6dd18" role="row"&gt;
          &lt;td role="gridcell"&gt;D&lt;/td&gt;
          &lt;td role="gridcell"&gt;143.58&lt;/td&gt;
          &lt;td role="gridcell"&gt;180&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where is the best place to start for writing tests to cover this scenario?</p>
  
  <p>I have done some additional playing with the Telerik Test Studio and testing this specific scenario in that application is extremely easy!</p>