Selenium 和 ExtJS 5 网格选择答案

【问题标题】：Selenium and ExtJS 5 Grid selectionSelenium 和 ExtJS 5 网格选择
【发布时间】：2015-07-29 13:21:05
【问题描述】：

我正在尝试找到一种使用 Selenium 定位 EXT JS 5 Gridpanel 的方法。我可以使用 Xpath 进入网格面板，但这并不理想。这是因为我在同一级别上有 2 个网格，所以两者的 Xpath 似乎结果相同。在 Selenium 中，我为我的应用程序设置了 PageObjects，这是我目前找到网格的方式：

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;
}

我在网格上有一个 cls 属性，但它永远找不到它。这是 DOM 的样子：

<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>

我知道这几乎是不可能的，有什么建议可以在这里更好地格式化吗？

所以本质上我希望测试到达网格，单击第一个元素，然后检查以确保它在第二个网格中。这是假设一个新的源网格和选定的网格开始。

我尝试了许多不同的方法。使用 Jsoup 向网格列添加静态 id 元素，尝试为 EXT 组件创建包装器。我还没有弄清楚如何让 Sencha 库在 Eclipse(Luna) 中工作，如果我能工作，那么我可以访问 Ext.ComponentQuery 等。

猜猜这可能是两个问题。

【问题讨论】：

使用class .x-grid-view up div
使用这个 //div[contains(@class, '.x-grid-view up')]/parent
感谢 Saifur 的编辑。
@raghavendra 你有更多相关文档吗？ class 或 xpath 的特定字符串对我不起作用，但它可能是我需要的正确方向。谢谢。
可以通过this

标签： javascript selenium extjs xpath

【解决方案1】：

由于 ExtJS 为每一行创建一个表，您可以使用以下 xpath

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

//div[@class='x-grid-item-container'] 将在哪里找到网格，table 是此处的行，我想获得第一行，所以我以1 作为索引，然后td 是行中的列。我想用1stcolumn 所以我用td[1]/div

所以上面的xpath会从第一个可见网格中找到第一行第一列

【讨论】：

谢谢马丹。这确实对我有用。我有另一个问题。使用这个想法，我尝试使用网格上的 cls 属性作为起点。到目前为止我没有任何运气，这可能你知道吗？ //div[@class='t-precautionsSourceGrid']//table[1]//td[1]//div是我正在尝试的。另外，如果类和表之间有很多 div，是否需要将它们包含在 xpath 字符串中？
不需要。只需阅读xpath中的单斜杠和双斜杠

【解决方案2】：

以防其他人阅读此内容。到目前为止，这是我想出的，使用 cls 属性以使 xpath 对于我的目的更易于理解。

 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"));

它仍然很丑，但它可以工作。

--edit-- 现在是让我感到愚蠢的部分。相反，您可以使用：

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

或者

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

然后抓取 GridPanel 中的任何内容。我没有看到一个使用这种链接方法的例子，也没有意识到这是可能的。

【讨论】：