title: Using Protractor to select a child div id
body: <p>I'm having an issue pulling a child <code>div</code> <strong>ID</strong> for each row in the <code>row.map</code> function below.</p>
  
  <p>In other words, for each row element I iterate, I want to pull <code>rowId</code> attrib:</p>
  
  <pre><code>&lt;div id="rowId_21"&gt;
  </code></pre>
  
  <p>Here's an Html snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index"&gt;
   &lt;div id="rowId_21" ng-class-odd="'row-2'" ng-class-even="'row-3'" &gt;
     &lt;div ng-repeat="column in  vm.sourceData.columns" &gt;    
       &lt;div ng-if="row[column.field].length !== 0" class="ng-scope highlight21"&gt; 
     &lt;span ng-bind-html="row[column.field] | changeNegToPrenFormat" vm.highlightedrow="" class="ng-binding"&gt; 
                  Sales
           &lt;/span&gt;
       &lt;/div&gt;    
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;div ng-repeat="row in vm.sourceData.data" ng-init="thatRow=$index"&gt;
    &lt;div id="rowId_22" ng-class-odd="'row-2'" ng-class-even="'row-3'" ng-class="vm.hideRow(row)" class="row-3 height-auto"&gt;
    &lt;!-- ... --&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I start with pulling the <code>rows</code> object, then I iterate them :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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.');            
  });   </code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought this would pull the first child id (i.e. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors</a> ): </p>
  
  <p><code>by.css('div[id^="rowId_"]')</code> ,</p>
  
  <p>or perhaps this way: </p>
  
  <p><code>by.xpath("descendant::div[starts-with(@id, 'rowId')]")</code> ,</p>
  
  <p>however neither seems to be working.</p>
  
  <p>Advice appreciated...</p>
  
  <p>Bob</p>