使用 Protractor 通过 by.repeater() 选择元素

Question

使用下面的 Protractor element 和 by.repeater() API 方法：

var targetRowText = 'Sales';
var targetGridName = 'myGrid';
var sel = 'grid-directive[grid-name="' + targetGridName + '"] .col-freeze .grid-wrapper';
var gridRows = element(by.css(sel).all(by.repeater('row in vm.sourceData.data'));
var result = gridRows.all(by.cssContainingText('span', targetRowText)).first();

我可以从我标记为myGrid的网格中选择以下行元素：

<div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto">
 <div ng-repeat="column in  vm.sourceData.columns" >
     <div ng-if="!column.subCols" class="ng-scope">	
 	<div ng-if="row[column.field].length !== 0" class="ng-scope highlight21">	
 	    <span ng-bind-html="row[column.field] | changeNegToPrenFormat" vm.highlightedrow="" class="ng-binding"> 
                Sales
            </span>
 	</div>
     </div>    
 </div>
</div>

请注意，我使用by.cssContainingText() 来查找“销售”span 元素。

我的问题：

我在 var result 中找到了这一行，如何检索最外层 div 的 id 属性？

换句话说，我需要选择<div id="rowId_21"，以便我可以在后续的量角器选择器中重用id="rowId_21"。

例如，在 jQuery 中，我可以使用蛮力来获取外部 div id，如下所示：

var el = $('grid-directive[grid-name="Sales"] .col-freeze .grid-wrapper #rowId_21 span')
el.parentElement.parentElement.parentElement.parentElement;

这是我的意思的高级概述。网格实际上将最左边的列与实际的数据行分开，因此有两个不同的 div 可以完成此操作：

<div grid-directive grid-name="myGrid">
 <div class="col-freeze" >
    <!-- CONTAINS LEFT-MOST "CATEGORIES" COLUMN -->
 </div>
 <div class="min-width-grid-wrapper"> 
    <!-- CONTAINS THE DATA ROWS-->
 </div>

但是，我在 Protractor 中很难做到这一点。

不胜感激...

鲍勃

Answer 1

一个直接的选择是使用ancestor axis 到达所需的父元素：

element(by.xpath("./ancestor::div[starts-with(@id, 'rowId')]")).getAttribute("id").then(function (parentId) {
    // use parentId here
});

不过，我认为这种从树上下来然后再上树的情况应该被视为一个迹象，表明您没有以简单和正确的方式解决问题。