javascript - Protractor - 单击表格中的按钮

Question

如下面的 HTML 代码所列，每个测试站点旁边都有一个包含测试站点链接列表和删除按钮的表格。

 /* 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.
                 } 

 


            });   
 }); 
}

我正在尝试添加一个如上所示的函数，以在表中搜索测试站点并删除该站点(如果该站点在表中可用)。但是，当尝试单击删除按钮时，测试失败，并提示“TypeError:对象不是函数”。如果这需要任何修正，请您提出建议。

请找到下面的表格 HTML 代码以及测试站点链接。

<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

首先，element(by.css(test))调用将使用来自内部范围的element变量each() 回调。

相反，我会用 filter() 来处理它和 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();
    }
});

这里的想法是迭代转发器中的所有站点，评估 site.name 并检查它是否是所需的站点。如果是，请单击中继器 block 内的Delete 按钮。