Protractor - clicking on a button in a table

Question

As listed in below HTML code, There is table with list of test site links and delete button next to each of the test site.

 /* element locators in table */
var testSiteLinks = element.all(by.css('a[ui-sref^="testpages"]'));
var deleteBtnCssStart = "body > div.container > div > div > div > div > div > div:nth-child(2) > table > tbody > tr:nth-child(";
var deteletBtnCssEnd  = ") > td > button";

var testSite = {
deleteSite: function(siteName){
        
        testSiteLinks.each(function(element,index){
                
              
              var temp = index;
              element.getText().then(function(text) {

                  
                 temp++;
                 var patt = new RegExp(siteName);
                 if(patt.test(text)){
                   
                    //css locator for delete button, corresponding to test site
                    var test = deleteBtnCssStart + temp + deteletBtnCssEnd;
                   
                    element(by.css(test)).click();  //this step failing stating, not a function.
                 } 

 


            });   
 }); 
}

I am trying to add a function as shown above, to search for testsite in table and delete the site if it is available in table . however test is failing when trying to click on delete button, stating "TypeError: object is not a function". could you please advise, if this need any correction.

Please find below HTML code for table along with test site links.

<table class="table card">
    <thead></thead>
          <tbody>
          <!-- ngRepeat: site in Sites --><tr ng-repeat="site in Sites" class="ng-scope">
            <td>
              <button ng-hide="role.DeletingSite===true" ng-click="role.DeletingSite=true" class="delSite pull-right btn btn-sm btn-danger" tabindex="0" aria-hidden="false">Delete</button>

              <div ng-show="role.DeletingSite===true" class="pull-right ng-hide" aria-hidden="true">
               <a ng-click="role.DeletingSite=false" class="btn btn-sm btn-default pull-right" tabindex="0">Cancel</a>
               <a ng-click="deleteSite(site)" class="reallyDelete btn btn-sm btn-danger pull-right " tabindex="0">Delete</a>
              </div>

             <a ui-sref="testpages({id:site.id, name:site.name, host:site.host, httpsSupported:site.httpsSupported})" class="ng-binding" href="#/testsite/pages/40288a884cdaa49a014cdbfb08270003/testsite/testsite/true   ">testsite (testsite)</a>
                        </td>
                    </tr><!-- end ngRepeat: site in Sites --><tr ng-repeat="site in Sites" class="ng-scope">
                        <td>
                            <button ng-hide="role.DeletingSite===true" ng-click="role.DeletingSite=true" class="delSite pull-right btn btn-sm btn-danger" tabindex="0" aria-hidden="false">Delete</button>

                            <div ng-show="role.DeletingSite===true" class="pull-right ng-hide" aria-hidden="true">
                                <a ng-click="role.DeletingSite=false" class="btn btn-sm btn-default pull-right" tabindex="0">Cancel</a>
                                <a ng-click="deleteSite(site)" class="reallyDelete btn btn-sm btn-danger pull-right " tabindex="0">Delete</a>
                            </div>

                            <a ui-sref="testsitepages({id:site.id, name:site.name, host:site.host, httpsSupported:site.httpsSupported})" class="ng-binding" href="#/test/pages/40288a884cd57e14014cd60701890001/TestSite.org/testsite.org/false   ">Testsite.org (testsite.org)</a>
                        </td>
                    </tr><!-- end ngRepeat: site in Sites -->
                </tbody>
            </table>

Answer 1

First of all, the element(by.css(test)) call would use the element variable from the inner scope coming from each() callback.

Instead, I would approach it with filter() and evaluate():

element.all(by.repeater("site in Sites")).filter(function (site) {
    return site.evaluate("site.name").then(function (name) {
        return name == siteName;
    });
}).then(function (sites) {
    if (sites) {  // we have a match - find and click the Delete button
        sites[0].element(by.linkText("Delete")).click();
    }
});

The idea here is to iterate over all sites in the repeater, evaluate the site.name and check if it is the desired one. If it is, click the Delete button found inside the repeater block.