Get the specific element at the given index from an array of elements using

Question

Get the specific element at the given index from an array of elements using

I'm currently tackling a challenge with my angular e2e test project. The task at hand involves selecting the second element within an ng-repeat that has the heading "Topic - xyz" and then clicking on the button that is a sibling of this element. How should I approach this?

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

My attempts to achieve this have been unsuccessful so far.

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

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

angularjs protractor

Answer 1

Answer №1

$(by.repeater('post in posts')) and

$by.css('[ng-click="posts.newPost()"]')

- these examples do not show the correct syntax for using the by.repeater() or by.css() locators. The use of $$ is actually a shortcut for element.all(by.css()) and should not be used with the "repeater" locator. When using $(), there is no need to wrap the selector in by.css():

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

To narrow down the repeater element based on the topic name, you can utilize the .filter() function:

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();

You may also consider trying out the by.buttonText locator which could provide a cleaner solution:

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

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

Answer 2

$(by.repeater('post in posts')) and

$by.css('[ng-click="posts.newPost()"]')

- these examples do not show the correct syntax for using the by.repeater() or by.css() locators. The use of $$ is actually a shortcut for element.all(by.css()) and should not be used with the "repeater" locator. When using $(), there is no need to wrap the selector in by.css():

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

To narrow down the repeater element based on the topic name, you can utilize the .filter() function:

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();

You may also consider trying out the by.buttonText locator which could provide a cleaner solution:

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

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

Get the specific element at the given index from an array of elements using

Answer №1

Similar questions

Angular: Assign a value to ng-model using a variable from the scope

Exploring AngularJS $compile and the concept of scoping within JavaScript windows

Connecting to deeply nested attributes within an object using specified criteria

The ng-view directive within AngularJS appears to be malfunctioning

The .val() and focus() methods are not functioning correctly

Retrieve the value of an unmatched ng-pattern field

Angular handling multiple query parameters

Chained module incorporating a specialized Angular form validation directive

Traversing through nested arrays within nested objects using AngularJS

Having trouble getting ng-repeat to work properly alongside Bootstrap collapse?

Lamenting the Perils of Losing AngularJS Rootscope Data upon Refresh

What could be causing the AngularStrap modal to flicker when I attempt to close it?

Error encountered in MEAN stack when making an AJAX POST request: TypeError occurs when attempting to access property 'userName' of an undefined object

Sending an object and receiving it in an Angular modal window

Bower consistently installs the most up-to-date version instead of the version that was explicitly specified

Anticipating outcome: row 1 column 1 (character 0) in Python

Return user to the previous webpage upon successful login using Node

Guide to uploading multiple images to an Amazon AWS S3 bucket using Node.js, Angular, and JavaScript

Error: The 'in' operator cannot be utilized to search for 'length' in the Kendo UI framework

The AngularJS component materializes almost instantaneously