Issue with clicking checkbox using Protractor

Having trouble clicking a checkbox within an ng-repeater using Protractor with the following HTML structure.

https://i.sstatic.net/FpY1x.png

The snippet of code I'm currently using is as follows:

element.all(by.repeater('user in siteUsers | filter: { SiteId: site.SiteId }'))
            .then(function (ElementArray) {
                ElementArray[0].all(by.tagName('input')).get(0).click();
            }).catch((err) => {
                console.log(err);
            });

However, I keep encountering the error message below:

TypeError: Cannot read property 'all' of undefined
    at C:\AGLRepository\Agl.Digital.SolarCommand.WebApi\e2eTests\src\components\settings\addRemoveUsers\addRemoveUsers.page.ts:87:32
    at ManagedPromise.invokeCallback_ (C:\Users\MyDevMachine\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:1379:14)
    at TaskQueue.execute_ (C:\Users\MyDevMachine\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2913:14)
    at TaskQueue.executeNext_ (C:\Users\MyDevMachine\AppData\Roaming\npm\node_modules\protractor\node_modules\selenium-webdriver\lib\promise.js:2896:21)

I've also tried the solutions provided in this link, but unfortunately without success.

Thank you for your help in advance.

Click here for more details.

Answer №1

You have made an error in your usage of .all(). Refer to the following excerpt from the official documentation for guidance:

element.all(locator).all(locator) View code ElementArrayFinder.prototype.all

By chaining calls to ElementArrayFinder, you can locate an array of elements starting from the current elements in this ElementArrayFinder. The function will return a new ElementArrayFinder containing the found children elements (which could potentially be empty).

Your incorrect usage:

ElementArray[0].all(by.tagName('input')).get(0).click()
Correct Usage:
ElementArray.all(by.tagName('input')).get(0).click()

Furthermore, it is recommended not to resolve the promise of element.all(). You can handle it as shown below:

element.all(by.repeater('blah in blahs')).all(by.tagName('input')).get(0).click()

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

What is the method to update reference models in mongodb by generating documents within a different model?

In my API, I have three models: Patient, Doctor, and Reviews. The Reviews model is referenced in the Doctor model, with the intention that a patient can post a review for a specific doctor using Review.create(). However, even after the review document is c ...

Tips for modifying a class to accept a range of parameters from diverse functions

In my current Typescript project, I have implemented a builder to create objects for various methods. I am striving to make the builder adaptable for all methods in order to streamline the process without creating additional classes. At present, I have tw ...

The exportAs attribute is not specified as "ngForm" for any directive

Encountered an error while attempting to test the LoginComponent PhantomJS 2.1.1 (Linux 0.0.0): Executed 3 of 55 (1 FAILED) (0 secs / 0.307 secs) PhantomJS 2.1.1 (Linux 0.0.0) LoginComponent should create FAILED Failed: Uncaught (in promise): Error: Templ ...

I'm struggling to transfer information from my form to TypeScript in Angular

Currently, I am working on developing a fullstack application using Node.js and Angular (material UI). However, I have encountered an issue that I need help with. I am trying to figure out how to retrieve data from an Angular form for a small web resource ...

The element 'mat-toolbar' is unrecognized and not known:

Encountering an issue while executing karma tests - the error message indicates that 'mat-toolbar' is not a recognized element within the application. Here are some steps to troubleshoot this problem: 1. Confirm whether 'mat-toolbar' is ...

Encountering multiple error messages from Protractor @types

Lately, I've been using the Angular2 Webpack Starter created by AngularClass and I've started encountering some perplexing errors with Protractor. When trying to build, these errors pop up: Module 'webdriver' has no exported member &ap ...

Implementing Angular 2 - Steps to ensure a service is accessible within the app module

I'm running into an issue trying to utilize a function within a service that I believed was globally accessible. The service in question is named SavedNotificationService: import { Injectable } from '@angular/core'; @Injectable() export cl ...

Having trouble retrieving the Ionic 2 slides instance - getting a result of undefined

As I attempt to utilize the slides and access the instance in order to use the slideto functionality programmatically, I find myself encountering the issue of receiving 'undefined' back despite following the documentation. Here is my TypeScript ...

Encountering an error while testing Jasmine + Angular with Typescript: "TypeError: 'undefined' is not an object."

I'm having some difficulty while trying to test a specific service. It seems that I am struggling to match the mock response correctly: public getCustomerDetails(customerID:string): ng.IPromise<ICustomerDetails> { return this.testService.g ...

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

Using React to render an icon based on the value of props

I am working on a vacation project using React (TS), NodeJS, and mySQL. I am attempting to implement save and like icons with Material UI based on certain props conditions. The icons are located within the div className "MenuContent". How can I create a fu ...

The HttpInterceptor is programmed to identify and capture 401 error responses

After successfully implementing a code that called a logout() method upon receiving a 401 response from the server, I encountered issues following an upgrade of Angular from 5.2 to 7.0.3. It seems like either the HttpInterceptor interface has been modified ...

Retrieve the value of the Observable when it is true, or else display a message

In one of my templates, I have the following code snippet: <app-name val="{{ (observable$ | async)?.field > 0 || "No field" }}" The goal here is to retrieve the value of the property "field" from the Observable only if it is grea ...

Tips for navigating to the top of the browser window from the middle or bottom using JavaScript in Protractor

I am in need of clicking the element positioned at the bottom of the page first and then I must click on an element located at the top of the page. In other words, scroll up where it is not visible to the browser. To scroll down, I have used: browse ...

Looking to implement nested routes in Angular to ensure that each component's view updates properly

app-routing.module.ts import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import { BreadcrumbComponent } from './main-layout/breadcrumb/breadcrumb.component'; im ...

Having trouble displaying a "SectionList" in "React Native", it's just not cooperating

As a newcomer to programming, I recently started working with React Native. I attempted to create a FlatList, which was successful, but the data did not display as I intended. I realized I needed a header to organize the data the way I wanted, so I discove ...

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

"React Bootstrap column showing gaps on the sides instead of filling the entire

In my current project with React and React Bootstrap 4.0, I am aiming to create a collapsible side-bar of 300px width on the left side of the screen, with the content displayed in the remaining space. The main parent component for the side-bar and content ...

Required Ionic form field alert

Currently, I am developing a new app using ionic 3 and I am facing an issue with making inputs mandatory in my ionic-alert controller. Despite going through the ionic-component documentation and api documentation, I couldn't find a solution on how to ...

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

This is my first time on this platform, and I'm currently following a tutorial from Javascript Mastery to create a clone of a thread application. After watching the entire video and building the basic functionality based on it, I decided to enhance th ...