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表达式获取相关数据行，文本值为＆＃34; MY VALUE - COL2，ROW 1＆＃34;和id =＆＃34; 1484316102519-0-uiGrid-0007-cell＆＃34;。

这是一个示例DOM -

＆＃13;

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

＆＃13;

我注意到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 attrib：

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，我很高兴。

我希望将来可以帮助某人。

用于导航DOM的量角器和xpath

1 个答案: