CODEWITHSUNDEEP
javascriptcssxpathfilterprotractor
Hema Latha
Hema Latha

Reputation: 85

Protractor - Locating table elements using filter

There are a couple of rows in a table and I need to click the edit link of row by matching the following text: name1

I cannot find 'edit' which is in the first row. I tried to locate the element using XPath and CSS but it didn't work.

Here is my HTML code: 

<tr ng-repeat="medication in modelCaseMed.medicationInfo" class="ng-scope odd" role="row">
  <td class="ng-binding">name1</td>
  <td class="ng-binding">04/06/2017</td>
  <td class="ng-binding">04/28/2017</td>
  <td class="ng-binding">12</td>
  <td class="ng-binding">Hourly</td>
  <td class="ng-binding">1</td>
  <td>
    <a href="" ng-click="addMedication(medication, 'edit')">
      <i class="fa fa-pencil-square-o"></i> Edit</a> |  
    <a href="" ng-click="deleteMedication(medication, 'Modify')">
      <i class="fa fa-trash"></i> Delete</a>
  </td>
</tr>

Can you please help me to match the text name1 in rows and then click edit link of the first row?

Upvotes: 1

Views: 819

Answers (2)

PQ Co
PQ Co

Reputation: 517

Another way is to get the tr using the text name1 then locate the anchor using the text Edit:

var elmTR = element.all(by.cssContainingText('tr', 'name1')).last();
var elmEdit = elmTR.element(by.cssContatingText('a', 'Edit'));
elmEdit.click();

Upvotes: 0

Sudharsan Selvaraj
Sudharsan Selvaraj

Reputation: 4832

try the below code,

element.all(by.repeater("medication in modelCaseMed.medicationInfo")).filter(function(_tableRow){
  return _tableRow.element(by.css("td:nth-child(1)")).getText().then(function(name){
      return name == "name1"; //replace it with the required name;
  });
}).first().element(by.css("i.fa-pencil-square-o")).click();

Upvotes: 1

Related Questions