通过 by.repeater() 使用 Protractor 计算 select 元素

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

我能够 select 我标记的网格中的以下行元素，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() 查找 "Sales" span 元素。

我的问题：

我已经在 var result 中找到了这一行，我怎样才能检索最外层 div 的 id 属性？

换句话说，我需要 selected <div id="rowId_21" 以便我可以在后续的 Protractor selector.

中重用 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
});

尽管如此，我认为这种先下后上的行为应该被视为您没有以简单正确的方式解决问题的标志。

通过 by.repeater() 使用 Protractor 计算 select 元素

Using Protractor to select elements with by.repeater()

protractor

angularjs-e2e