Guide on utilizing isElementPresent/isPresent within ng-repeat with Protractor

HTML Code:

<div ng-repeat="todo in todos">
        <span><input ng-model="todo.title" /></span>
        <span><input ng-model="todo.time" /></span>
        <span><input ng-model="todo.name" /></span>
</div>

Test Passing Successfully:

expect(element(by.repeater('todo in todos')).isPresent()).toBe(true);

Test Passing Successfully:

expect(element(by.repeater('todo in todos').row(1)).isPresent()).toBe(true);

Failing Test 1:

Expected false to be true.

expect(element(by.repeater('todo in todos').row(1).column('todo.name')).isPresent()).toBe(true);

Failing Test 2:

Expected false to be true.

browser.isElementPresent(element(by.repeater('todo in todos').row(1).column('todo.name'))).then(function(present){
    expect(present).toBe(true);
})

While I am able to set and retrieve data at the item level, I seem to have difficulty using isPresent or isElementPresent at that same level. Any suggestions?

Answer №1

One issue here is that when using .column('todo.name'), it searches for elements that are bound to todo.name. Essentially, it performs a search by binding (refer to findRepeaterElement), while your todo.name is designated as an ng-model.

As @juliemr pointed out (issue ng-repeat with ng-model bindings):

The column selector requires a string that matches bindings, not input ng-models.

Answer №2

Success! I managed to get this code working by implementing a feature that allows sendKeys only if there is input present.

After debugging in webstorm, here's the modified code:

element.all(by.repeater('todo in todos')).then(function(allrows){

    for(var i = 0 ;i<allrows.length ;i++)
    {
        allrows[i].all(by.model('todo.name')).then(function(field){

            field[0].isPresent().then(function(val){

                expect(val).toBe(true);

                field[0].sendKeys('22.335');

            });
        });
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increment and decrement the like count on fa-heart multiple times

Is there a way to increment the count of a fa-heart value on click and decrement it on the second click? The issue I'm facing is that I have multiple fa-heart elements on the same page, making it challenging to increment or decrement the clicked fa-h ...

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

What is the best method for dynamically binding Tailwind classes in VueJS3/NuxtJS3?

Is there anyone who knows how to correctly bind the content Tailwind class dynamically in Vue.js 3/Nuxt.js 3? Let's say we have const isExpanded = true <h1 :class="{'after:content-[`:`]' : isExpanded}">Hello</h1> I att ...

JQuery not being recognized by MVC4 view

I encountered an issue with my @Html.DropDownList that is supposed to invoke a jquery function, but it seems that the function is not being called. I've attempted the following: $(document).ready(function () { $('.test').change(function ...

Is there a method to establish varied usage permissions for a single page without any tracking?

I am puzzled by how a solution could create something like this. My goal is to have a webpage displaying 2 squares on a large screen. There will be 2 users, each needing access to write in their own square only on this page. <div class="square1"> ...

Sort your Laravel pagination table effortlessly with just one click

Here is my current setup: <table class="table table-striped"> <tr> <th> Item Image </th> <th> Item Number </th> <th> Item Name </th> <th> Description </th> ...

AngularJS: Getting language details in AngularJS based on language code

When working with Android, it is possible to obtain language information directly from the language code using the Locale class. The example below demonstrates this: Locale locale = new Locale("fr"); locale.getDisplayName(locale); // Français locale.getD ...

How can Selenium/WebDriver and Python help me prevent the camera and microphone permissions prompt from appearing?

In my Python Selenium automation for a remote browser, I am encountering a challenge with accessing the webcam and microphone. Upon navigating to a page that requires access, a pop-up window appears in Firefox asking "Would you like to share your camera an ...

Struggling with the task of assigning a glTF item to a separate layer within Three.js

Exploring the use of layers in Three.js. This script includes a sphere, a triangle, and a glTF object (car). I activated a second layer: camera.layers.enable(1); Assigned the sphere, triangle, and glTF object to layer 1: car.layers.set( 1 ); sphere.lay ...

Securing socket.io connection in a nodejs application

I'm currently developing a chat application that utilizes sockets for bi-directional message sharing. Although the socket is functioning properly, I would like to implement user authentication before granting access to the socket connection. I'v ...

Incorporate payment processing functionality into your IONIC app by connecting a

Do not flag this question as a duplicate or already answered. If you have knowledge on this subject, please provide an answer. I am attempting to incorporate the payumoney payment gateway into my hybrid app. After following several tutorials, I have resor ...

AngularJS: Incorporating multiple data components into a singular ng-model

Can a ng-model have multiple data values assigned to it? For example: <select ng-model="data1,data2" ng-change="changedValue(data1,data2)" If not, what are some common ways people address this problem? ...

When using `$destroy` in Angular, an error may occur indicating that the element is not defined

I need to cancel the $interval event in my directive when changing routes or states in the application. I tried using this code snippet to act on the destroy event: element.on('$destroy', function() { console.log("Canceling interval"); ...

Enhance the language with react-intl and MobX State Tree integration

Currently, I am integrating react-intl with Mobx state tree for the first time. Within my project, there are two buttons located in the header section - one for 'it' and the other for 'en'. Upon clicking these buttons, the selected lan ...

Navigating through the drupal module directory using JavaScript

Is there a way to retrieve the module path in Drupal 7 from which a .js file was loaded? Although JS is primarily a front-end language, is it possible that Drupal includes this information within the Drupal object? Essentially, I am trying to achieve so ...

Using setInterval in JavaScript to automatically update a TextField

As someone who is relatively new to Javascript and jQuery, I am trying to make a simple code that updates a text field with random values every 5 seconds. However, my implementation does not seem to be working. I apologize if this question seems too basic ...

Setting a scope variable in an isolate scope from a link function can be achieved by accessing the

In my attempt to assign a variable within an isolate scope, I am encountering difficulties accessing the variable set in the linked function. Surprisingly, I can access the controller's variable without any issues. app.directive('myDir', fu ...

What is the best way to replace all punctuation with spaces within a large text file using streaming in Node.js?

My goal is to search for all punctuation marks in text files of any size and replace them with spaces using Node.js. Given that the file may be large, I am utilizing read and write streams to break it into chunks before passing it to a function designed ...

tips on assigning a unique ID to an item in a firebase database collection

My code is structured like this: const userCollectionRef = collection(db, 'users'); Then I add data using the following method : const addInfoToDataBase = async () => { checkLike(); await addDoc(userCollectionRef, { likePost: us ...

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...