从元素数组中选择第n个元素jquery

Question

我正在开发我的angular e2e测试项目。我将下面的html作为我的ng-repeat的一部分生成，并且不包含任何id，我想选择与标题Topic - xyz一起使用的第二个元素，然后单击它是兄弟的子元素的按钮。我怎样才能做到这一点。

<div class="row ng-scope" ng-repeat="post in posts"> 
    <div class="col-md-7"> 
     <h4 class="ng-binding">Topic - ABC</h4> 
     <div class="text-right"> 
      <button class="btn btn-none btn-sm" ng-click="posts.newPost()"> 
       Create Post 
      </button> 
     </div> 
    </div> 
</div> 
<div class="row ng-scope" ng-repeat="post in posts"> 
    <div class="col-md-7"> 
     <h4 class="ng-binding">Topic - XYZ</h4> 
     <div class="text-right"> 
      <button class="btn btn-none btn-sm" ng-click="posts.newPost()"> 
       Create Post 
      </button> 
     </div> 
    </div> 
</div> 
<div class="row ng-scope" ng-repeat="post in posts"> 
    <div class="col-md-7"> 
     <h4 class="ng-binding">Topic - EFG</h4>  
     <div class="text-right"> 
      <button class="btn btn-none btn-sm" ng-click="posts.newPost()"> 
       Create Post 
      </button> 
     </div> 
    </div> 
</div> 

这是我一直在努力，到目前为止，这是不工作

var button = $$(by.repeater('post in posts')).get(1).$(by.css('[ng-click="posts.newPost()"]')) 

button.click(); // click is not showing up 

Answer 1

$$(by.repeater('post in posts'))和$(by.css('[ng-click="posts.newPost()"]')) - 这些都不是使用by.repeater()或by.css()定位的正确的语法。 $$是element.all(by.css())的快捷方式，不应用于“中继器”定位器。如果你使用$()，没有必要到你的选择包装成by.css()：

var button = element.all(by.repeater('post in posts')).get(1).$('[ng-click*=newPost]'); 
button.click(); 

---

如果你想过滤器由主题名称中继元素，你可以使用.filter()：

var button = element.all(by.repeater('post in posts')).filter(function (post) { 
    return post.$("h4").getText().then(function (postTitle) { 
     return postTitle === "Topic - XYZ"; 
    }); 
}).get(1).$('[ng-click*=newPost]'); 
button.click(); 

---

另外看看是否使用by.buttonText locator也可以工作（有点清洁）：

var post = element.all(by.repeater('post in posts')).get(1); 

var button = post.element(by.buttonText("Create Post")); 
button.click();