CODEWITHSUNDEEP
protractorangularjs-e2e
bob.mazzo
bob.mazzo

Reputation: 5627

Using Protractor to select a child div id

I'm having an issue pulling a child div ID for each row in the row.map function below.

In other words, for each row element I iterate, I want to pull rowId attrib:

<div id="rowId_21">

Here's an Html snippet:

<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
 <div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" >
   <div ng-repeat="column in  vm.sourceData.columns" >    
     <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> 
<div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index">
  <div id="rowId_22" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto">
  <!-- ... -->
 </div>
</div>

I start with pulling the rows object, then I iterate them :

// pulls the data rows
var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));

rows.map(function (row, idx) {            
  //var thisRowId = row.element(by.css('div[id^="rowId_"]'));  // *** RETURNS NULL
  
  var thisRowId = row.all(by.xpath("descendant::div[starts-with(@id, 'rowId')]"));
  
  thisRowId.getText().then(function(txt){              
      // RETURNS A VERY LONG ID: [ '7\n4\n41\n113\n3.3\n(34)\n(1.1)\n7...]
      console.log('--- Curr Div ID: ', txt);
  });
  
}).
then(function(){            
console.log('*** Rows.Map Done.');            
});

I thought this would pull the first child id (i.e. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors ):

by.css('div[id^="rowId_"]') ,

or perhaps this way:

by.xpath("descendant::div[starts-with(@id, 'rowId')]") ,

however neither seems to be working.

Advice appreciated...

Bob

Upvotes: 1

Views: 568

Answers (1)

alecxe
alecxe

Reputation: 473833

First of all, you need to return from the mapping function. And, use .getAttribute() method to get the id attribute:

var selDataRows = '.grid-wrapper.fluid-wrapper';
var rows = element(by.css(selDataRows)).all(by.repeater('row in vm.sourceData.data'));

rows.map(function (row) {            
    return row.element(by.xpath("descendant::div[starts-with(@id, 'rowId')]")).getAttribute("id").then(function(rowId) {              
        return rowId;
    });
}).then(function(ids) {            
    console.log(ids);            
});

Upvotes: 1

Related Questions