select nth element from element array jquery

Question

I'm working on my angular e2e test project. I've the following html generated as part of my ng-repeat with out any id, I would like to choose the second element that is with heading Topic - xyz and also then click the button which is a child of it's sibling. How can I do that.

<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>

This is what I've tried to so far which is not working

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')) and $(by.css('[ng-click="posts.newPost()"]')) - these are not correct syntax of using the by.repeater() or by.css() locator. $$ is a shortcut for the element.all(by.css()) and should not be used for the "repeater" locator. If you use $(), there is no need to wrap your selector into by.css():

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

---

If you want to filter the repeater element by the topic name, you can use .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();

---

Also see if using the by.buttonText locator would work as well (a little bit cleaner):

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

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