Selenium and ExtJS 5 Grid selection

Question

I am trying to find a way to locate EXT JS 5 Gridpanel using Selenium. I can use Xpath to get to the gridpanel, but this is not ideal. This is because I have 2 grids on the same level so the Xpath for both seems to turn out the same. In Selenium I have setup PageObjects for my app here is how I find the grid presently:

public static WebElement sourceGrid(WebDriver driver){
    element = driver.findElement(By.xpath("//div[2]/div/div/div/div[3]/div/div[2]/table/tbody/tr/td/div"));
    return element;
}

I do have an cls attribute on the grid but it can never find it. Here is what the DOM looks like:

<div id="t_precautionsSourceGrid-body" data-ref="body" class="x-panel-body x-grid-with-row-lines x-grid-body x-panel-body-default x-panel-body-default x-noborder-rbl" role="presentation" style="width: 506px; left: 0px; top: 48px; height: 734px;">
   <div class="x-grid-view x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable" id="tableview-1168" tabindex="0" componentid="tableview-1168" style="overflow: auto; margin: 0px; width: 506px; height: 733px;">
      <div role="presentation" style="width: 1px; height: 1px; margin-top: -1px; position: absolute; left: 0px; display: none;" id="ext-element-11"></div>
      <div class="x-grid-item-container" style="width: 506px; transform: translate3d(0px, 0px, 0px);">
         <table id="tableview-1168-record-439" data-boundview="tableview-1168" data-recordid="439" data-recordindex="0" class="x-grid-item x-grid-item-selected" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">C.Diff (Clostridium Difficile)</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-440" data-boundview="tableview-1168" data-recordid="440" data-recordindex="1" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">Combative</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-441" data-boundview="tableview-1168" data-recordid="441" data-recordindex="2" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">Falls Alert</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-442" data-boundview="tableview-1168" data-recordid="442" data-recordindex="3" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">MRSA (Methicillin Resistant Staphylococcus Aureus)</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-443" data-boundview="tableview-1168" data-recordid="443" data-recordindex="4" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">Respiratory</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-444" data-boundview="tableview-1168" data-recordid="444" data-recordindex="5" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">Reverse Isolation</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
         <table id="tableview-1168-record-445" data-boundview="tableview-1168" data-recordid="445" data-recordindex="6" class="x-grid-item" cellpadding="0" cellspacing="0" style=";width:0">
            <tbody>
               <tr class="  x-grid-row">
                  <td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1166 x-grid-cell-first x-unselectable" style="width:476px;" tabindex="-1" data-columnid="gridcolumn-1166">
                     <div unselectable="on" class="x-grid-cell-inner " style="text-align:left;">VRE (Vancomycin Resistant Enterococci)</div>
                  </td>
                  <td class="x-grid-cell x-grid-td x-grid-cell-actioncolumn-1167  x-action-col-cell x-grid-cell-last x-unselectable" style="width:30px;" tabindex="-1" data-columnid="actioncolumn-1167">
                     <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-action-col" style="text-align:left;"><img role="button" alt="" src="Images/add.png" class="x-action-col-icon x-action-col-0  " data-qtip="Add"></div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>

I know that is next to impossible to look at, any suggestions how to make it better formatted here?

So in essence I want the test to get to the grid, click to the first element and then check to make sure it is in the second grid. This is assuming a fresh source grid and selected grid to begin with.

I have tried many different approaches. Adding a static id element to the grid columns, using Jsoup, trying to create wrappers for EXT Components. I haven't figured out yet how to get the Sencha library to work in Eclipse(Luna), if I could work that then I could access things like Ext.ComponentQuery etc.

Guess that was two questions maybe.

@raghavendra Do you have more documentation on that? That particular string for class or xpath doesn't work for me, but it may be the right direction I need. Thank you. — tesposito, Jul 29 '15 at 14:54
You can go through [this](http://stackoverflow.com/questions/107314/any-suggestions-for-testing-extjs-code-in-a-browser-preferably-with-selenium) — Madhan, Jul 29 '15 at 15:38
Is it possible to provide link to your application or can you provide what example suites from [these examples](http://dev.sencha.com/extjs/5.1.0/examples/) — Madhan, Jul 29 '15 at 15:41

score 2 · Accepted Answer · answered Jul 29 '15 at 16:02

2

As ExtJS creates a table for each row,You can go with the following xpath

//div[@class='x-grid-item-container']//table[1]//td[1]/div

where //div[@class='x-grid-item-container'] will find the grid and table is the row here I wanted to get the first row so I've gone with 1 as index and following td are the columns in the row.I wanted to go with 1stcolumn so I use td[1]/div

So the above xpath will find the first row first column from the first visible grid

answered Jul 29 '15 at 16:02

Madhan

5,750
4
28
61

Thank you Madhan. This did work for me. I have another question. Using this idea, I am trying to use cls attribute on the grid as the starting point. I am not having any luck so far, is this possible do you know? //div[@class='t-precautionsSourceGrid']//table[1]//td[1]//div is what I was trying. Also if there are many divs between the class and the table do they need to be included in the xpath string? – tesposito Jul 30 '15 at 13:52
No need .Just read about single slash and double slashes in [xpath](http://courses.ischool.berkeley.edu/i290-14/s05/lecture-4/allslides.html) – Madhan Jul 30 '15 at 15:29

tesposito · Answer 2 · 2015-07-31T17:47:46.757

In case anyone else reads this. This is what I came up with so far, using the cls attribute in order to make the xpath a little more understandable for my purposes.

 driver.findElement(By.xpath("//div[@class='x-panel <cls attribute name> x-box-item x-panel-default x-grid']/div[4]/div/div/table/tbody/tr/td/div"));

It's still pretty ugly but it functions.

--edit-- And now for the part that makes me feel dumb. Instead you can use:

driver.findElement(By.className("<cls attribute>"))
            .findElement(By.className("x-grid-item-container"))
            .findElement(By.className("x-grid-cell"));

Or

driver.findElement(By.className("t-allergiesSourceGrid"))
            .findElement(By.className("x-grid-item-container"))
            .findElement**s**(By.className("x-grid-cell"));

Then grab anything in the GridPanel. I have not seen a single example using this chaining method and did not realize it was possible.

Selenium and ExtJS 5 Grid selection

2 Answers2