Using Protractor to select a child div id

Question

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

score 1 · Accepted Answer · answered Oct 31 '16 at 21:07

1

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

answered Oct 31 '16 at 21:07

alecxe

462,703
120
1,088
1,195

Hello friend, and thnk you for responding. Turns out I need the rowId within the mapping function; however, looks like I made an error by using `thisRowId.getText()` instead of `getAttribute("id")`. I'll retest first thing in morning. THANKS ! – bob.mazzo Oct 31 '16 at 21:25
1

@bob.mazzo got it, yeah, this should help. By the way, if you don't need the array of ids later, see if `each()` is a better tool for the job than `map()`. Thanks, let's grab a beer or two sometime in the city! (ping me through linkedin if interested!) – alecxe Oct 31 '16 at 21:27
I was considering `.each()` but I forget exactly what happened. I'll revisit that idea. +1 – bob.mazzo Oct 31 '16 at 21:36
After changing that key line to `getAttribute("id")`, I noticed that this line also pulls the row id - `row.element(by.css('div[id^="rowId_"]'))` . It might be just slightly faster using by.css() instead of xpath(). – bob.mazzo Nov 01 '16 at 13:25
how do I exit the `.each()` under a certain condition ? I see that `return false` only break out of the current iteration, then moves to the next one. – bob.mazzo Nov 01 '16 at 14:42
1

@bob.mazzo I think you may be interested in using the `takewhile()` function, take a look: http://stackoverflow.com/questions/32572299/take-elements-while-a-condition-evaluates-to-true-extending-elementarrayfinder. Hope that helps. – alecxe Nov 01 '16 at 18:37

Using Protractor to select a child div id

1 Answers1