量角器和 xpath 导航 DOM答案

【问题标题】：Protractor and xpath to navigate the DOM量角器和 xpath 导航 DOM
【发布时间】：2017-01-25 00:23:43
【问题描述】：

我可以使用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 表达式来获取相关数据行，文本值“MY VALUE - COL2, ROW 1”和 id="1484316102519-0-uiGrid-0007-cell"。

这是一个示例 DOM -

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

我注意到与 div ID 的生成存在关联，因此我可能可以剥离 ID 并推断其相关的数据单元格；但是，有没有办法使用 xPath 来获取相关的 div ？

也许我正在寻找同级元素，但我不清楚如何使用 xpath 表达式来完成此操作。

谢谢，鲍勃

【问题讨论】：

id 的值是否应该相等 - “1484316102519-0-uiGrid-0006-cell”和“1484316102519-0-uiGrid-0007-cell”？或者，0006 和 0007 的区别是故意的？谢谢。
@alecxe - 嗨，亚历克斯。这种数字差异是故意的。它似乎是一种模式。我可以通过去掉“uiGrid”文本和“-cell”文本之间的唯一值来计算最左边的行标题到它的相关数据值......

标签： protractor angularjs-e2e

【解决方案1】：

我的解决方案是非常具体的 ui-grid，所以也许这对将来的某个人会有所帮助。考虑上面 DOM 示例中的 sn-p，注意 -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 属性：

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，我就可以走了。

我希望这对将来的某人有所帮助。

【讨论】：