量角器和 xpath 导航 DOM

Question

我可以使用 cssContainingText() 查找网格行，并按如下方式获取其 id 属性：

this.getRowIdByText = function (text) { 
  var sel = '#theReport .ui-grid-viewport .ui-grid-canvas';
  var firstRow = element.all(by.css(sel)).first();
  var gridRows = firstRow.all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index'));

  var result = gridRows.all(by.cssContainingText('div', "COL 1, ROW 1 TEXT CONTENTS")).first();

  var parentId = result.all(by.xpath("./div")); // "./ancestor::div[starts-with(@id, 'id')]"
return parentId.getAttribute("id");

但现在我想使用一些 xPath 表达式来获取相关数据行，文本值为 "MY VALUE - COL2, ROW 1" 和 id="1484316102519-0-uiGrid-0007-cell"。

这是一个示例 DOM -

<div class="ui-grid-contents-wrapper">
   <div class="grid-menu-stuff">...</div>

   <!-- LEFT-MOST COLUMNS -->
   <div class="grid-container-left">
    <div class="grid-header">...</div>
    <div role="rowgroup" class="ui-grid-viewport">
       
       <div class="ui-grid-canvas">
        <!-- HERE IS THE ROW REPEATER !!! -->
        <div ng-repeat="row in rowContainer.renderedRows">
           <div ui-grid-row="row">
              <div class="ui-grid-cell">
              
                <!-- COL 1, ROW 1 -->
                 <div id="1484316102519-0-uiGrid-0006-cell">
                    <div class="ui-grid-cell-contents" title="COL 1, ROW 1 TEXT CONTENTS"> COL 1, ROW 1 TEXT CONTENTS</div>
                 </div>
                 
              </div>
           </div>   
        </div> 
        <div ng-repeat="row in rowContainer.renderedRows">
           <div ui-grid-row="row">
        <div class="ui-grid-cell">
        
           <!-- COL 1, ROW 2 -->
    <div id="1484316102519-1-uiGrid-0006-cell">
       <div class="ui-grid-cell-contents" title="COL 1, ROW 2 TEXT CONTENTS"> COL 1, ROW 2 TEXT CONTENTS</div>
    </div>
        </div>
           </div>  
          
          
        </div>
        <div ng-repeat="row in rowContainer.renderedRows">
          
        </div>
       </div>   
       
    </div>
   </div>
   
   <!-- DATA ROWS -->
   <div role="rowGroup" class="ui-grid-viewport">
      <div class="ui-grid-canvas">
         <div ng-repeat="row in rowContainer.renderedRows">
            <div ui-grid-row="row">
               <div ui-grid-row="row">
                  <div ng-repeat="col in Columns" id="1484316102519-0-uiGrid-0007-cell">     
                     <div class="ui-grid-cell-contents" title="MY VALUE - COL2, ROW 1">MY VALUE - COL2, ROW 1</div>
                  </div>
               </div>
            </div>
         </div>
         
         <div ng-repeat="row in rowContainer.renderedRows">
      <div ui-grid-row="row">
  <div ui-grid-row="row">
     <div ng-repeat="col in Columns" id="1484316102519-1-uiGrid-0007-cell">     
        <div class="ui-grid-cell-contents" title="MY VALUE - COL2, ROW 2">MY VALUE - COL2, ROW 2</div>
     </div>
  </div>
      </div>
         </div>
         
      </div
   </div>
</div>

我注意到 div ID 的生成存在相关性，因此我可能会剥离 ID 并推断出其相关的数据单元；但是，有没有办法使用 xPath 获取相关的 div ?

也许我正在寻找同级元素，但我不清楚如何使用 xpath 表达式来完成此操作。

谢谢，鲍勃

Answer 1

我的解决方案非常具体ui-grid，所以这也许会对将来的人有所帮助。考虑上面 DOM 示例中的一个片段，请注意 -1- 代表行号，-0006 是列号：

 <!-- COL 1, ROW 2 -->
 <div id="1484316102519-1-uiGrid-0006-cell">
    <div class="ui-grid-cell-contents" title="COL 1, ROW 2 TEXT CONTENTS"> COL 1, ROW 2 TEXT CONTENTS</div>
 </div>

我无法首先通过转发器获取所有行：

var rows myGrid.all(by.repeater('...'));

然后按文本查找行：

var result = rows.all(by.cssContainingText('div', 'COL 1, ROW 2 TEXT CONTENTS')).first();

在我的例子中，我需要第一个父 div 来获取 id 属性：

var parId = result.all(by.xpath("./div")); var myRowId parId.getAttribute)"id");

现在有了我需要的行 ID，我将提取行号，这样我就可以得到 ui-grid:

的数据行

var rowId = myRowId.split('-')[1];

现在我终于可以获取数据行了:

var row = this.getDataRows().get(rowId); // getDataRows 在我的函数库内部。

一旦我有了 row，那么我就可以开始了。

我希望这对以后的人有所帮助。

量角器和 xpath 导航 DOM

Protractor and xpath to navigate the DOM

angularjs-e2e

protractor