Question

使用以下量角器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的网格中选择以下行元素：

＆＃13;

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

＆＃13;

请注意，我已使用by.cssContainingText()查找＆＃34;销售＆＃34; 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
});

尽管如此，我认为这种情况下降然后上升应该被视为一种迹象表明你没有以一种简单而正确的方式解决问题。

使用Protractor选择带有by.repeater（）的元素

1 个答案: