獲取量角器

Question

使用行中的文本行數我有表結構如下

<table class="table"> 
    <thead> 
    <tr> 
     <th class="checkbox-column"></th> 
     <th class="main-column main-column--checkbox">Name</th> 
    </tr> 
    </thead> 
    <tbody ng-repeat="(a, b) in tests" class="ng-scope" style=""> 
    <tr class="panel__sub-header"> 
     <td> 
     <input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox"> 
     </td> 
     <td colspan="4"> 
     <h4 class="ng-binding">ROW2</h4> 
     </td> 
    </tr> 
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style=""> 
     <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td> 
     <td class="main-column"> 
     <a ng-href="#" class="ng-binding" href="#">test.name</a> 
     </td> 
    </tr> 
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style=""> 
     <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td> 
     <td class="main-column"> 
     <a ng-href="#" class="ng-binding" href="#">test.data</a> 
     </td> 
    </tr> 
    </tbody> 
    <tbody ng-repeat="(a, b) in tests" class="ng-scope" style=""> 
    <tr class="panel__sub-header"> 
     <td> 
     <input name="item-checkbox" ng-click="toggleSelectAll(a)" type="checkbox"> 
     </td> 
     <td colspan="4"> 
     <h4 class="ng-binding">ROW1</h4> 
     </td> 
    </tr> 
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style=""> 
     <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td> 
     <td class="main-column"> 
     <a ng-href="#" class="ng-binding" href="#">test.name</a> 
     </td> 
    </tr> 
    <tr ng-repeat="test in testData" ng-class-odd="'odd'" ng-class-even="'even'" class="ng-scope odd" style=""> 
     <td class="checkbox-column"><input name="item-checkbox" ng-click="checkFunction()" type="checkbox"></td> 
     <td class="main-column"> 
      <a ng-href="#" class="ng-binding" href="#">test.data</a> 
     </td> 
    </tr> 
    </tbody> 
</table> 

我需要通過使用下面的 element(by.repeater('(a, b) in tests').row(0)).element(by.css('[xxx]'))拿到表格單元格。目前正在使用的硬編碼行數來實現這一點，但它不是所有的工作時間，由於動態UI改變

這有可能通過將文本量角器

防爆得到使用的行號： 如果我通過文字ROW2那麼就應該使用中繼器(a, b) in tests然後我可以能夠使用的行數動態

Answer 1

您可以使用filter()方法獲取包含預期文本的特定行，而不是通過獲取行號來完成此操作。

var columnElement = element.all(by.repeater('(a, b) in tests')).filter(function(rowElement){ 
    return rowElement.element(by.css("td h4")).getText().then(function(text){ 
    return text.trim() == "ROW2" 
    }); 
}).first().element(by.css("somecss")); 

Answer 2

與XPath搜尋返回的行號爲0：

element(by.repeater('(a, b) in tests').row(0)).element(by.xpath('XXX')) 

或

function GetRowNumber(yourText) 
{ 
    var items = element(by.repeater('(a, b) in tests')).all(by.tagName('h4')).map(function(elem) { 
     return elem.getText(); 
    }); 

    return items.then(function(elems){ 
     for(var i = 0; i < elems.length; i++) 
     { 
      if(elems[i] === yourText) 
       return i; 
     } 
    }); 
} 

此代碼尚未經過測試。

Answer 3

var getRowNumber = function (text) { 
    var tbody = element(by.repeater('(a, b) in tests')); 
    tbody.filter(function (elem, index) { 
     if (!!elem.element(by.cssContainingText('h4', text))) { 
      return index; 
     } 
    }) 
}; 
console.log('row number :'+ getRowNumber('ROW2'));