從元素數組中選擇第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();