Unable to break out of loop within TypeScript Protractor code

Currently I am delving into the realm of protractor and typescript while engaged in creating an automation test suite utilizing these technologies.

I formulated a method as:

 private allElements = $$('.some-list li');

 public async getDateElement(calDate: string) {
     this.allElements.each(async function(element, index){
      let eDate = await element.$('p').getText();
      if( eDate === calDate){
          // I tried both these options
          return eDate // getting undefined value here 
          return element.$('p').click(); // element get clicked but not coming out of loop
      }
    });
 }

Attempting another approach using a for loop, however, encountering issues with the break keyword:

public async getDateElement(calDate: string) {
for (let element of await this.allElements) {
  let eDate = await element.$('p').getText();
  if (eDate === calDate) {
    element.$('p').click();
    break;
  }
 }
}

Struggling to find a way to exit the for loop or return a result. Researching solutions led me to consider incorporating a try-catch block and throwing an exception upon finding matching dates. Is that the sole viable solution? Any assistance provided utilizing promises would be greatly appreciated :)

If further information is necessary, kindly inform me.

Answer №1

In case everything is synchronous, it is recommended to utilize the following series of Protractor methods:

public getDateElement(calDate: string) {
    return this.allElements
    .map(element => element.$('p'))
    .filter(p => p.getText() === calDate)
    .click();
}

Alternatively, if .getText() operates asynchronously, consider a solution like the one below which may involve an async version of the .map() stage as demonstrated earlier:

public async geDateElement(calDate: string) {    
    return this.allElements
    .filter(async element => await element.getText() === calDate)
    .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

Angular: extracting value from forkJoin nested within another observable's pipe

Here is the scenario that needs to be implemented: An API call is made which returns a response containing an array of objects. The objects are then mapped to another array of objects. For each item in this new array, another API call needs to be made. Th ...

The Relationship between Field and Parameter Types in TypeScript

I am currently working on a versatile component that allows for the creation of tables based on column configurations. Each row in the table is represented by a specific data model: export interface Record { attribute1: string, attribute2: { subAt ...

Has the antd Form.create() method been substituted with something else?

I have been working on creating a login page in react using antd. I came across a tutorial that seems to be outdated as it is giving me an error. After researching on a forum, I found out that form.create() is no longer available, but I am unsure of how to ...

Deactivate multiple textareas within a loop by utilizing JQuery/Typescript and KnockoutJS

I am working on a for loop that generates a series of textareas with unique ids using KO data-binding, but they all share the same name. My goal is to utilize Jquery to determine if all the textareas in the list are empty. If they are, I want to disable al ...

Can you explain the concept of widening in relation to function return types in TypeScript?

Recently, I've observed an interesting behavior in TypeScript. interface Foo { x: () => { x: 'hello' }; } const a: Foo = { x: () => { return { x: 'hello', excess: 3, // no error } }, } I came acro ...

Leveraging both function arguments and the 'this' keyword within a single

I have a JavaScript function that utilizes both the `this` keyword and captures arguments: var Watcher = function() { var callbacks = []; var currentValue = null; this.watch = function (callback) { callbacks.push(callback); if (currentValue ...

Parallel Execution Issue with RxJS Observable forkJoin

Struggling to understand why my requests aren't executing concurrently with the following code. As a newcomer to RxJS and observables, I would greatly appreciate any guidance on improving this snippet below. Essentially, I am fetching data from a REST ...

Tips for displaying an array and iterating through its children in Angular 7

I am currently working on extracting the parent and its children to an array in order to display them using ngFor. However, I am encountering an issue where the children are not being displayed during the ngFor. I have a service that retrieves data from a ...

What is the mechanism behind this straightforward PrimeNG Angular 2 illustration?

As a newcomer to Angular 2/4 coming from Java, I have some uncertainties regarding an Angular project utilizing PrimeNG components. To kick things off, I followed an introductory video tutorial for setting up my first Angular 4 webapp with PrimeNG integra ...

Is there a way for me to confirm the presence of a particular object within an array and return a true value

I am working on a form in Angular that includes checkboxes. I want to automatically check the checkbox if the user has a specific role. Here is my current approach: <form [formGroup]="rolesForm"> <label formArrayName="roles" *ngFor=" ...

Using Angular 2 to bind values to a form select option

I am attempting to dynamically change the color of an element based on the user's selection from a form select dropdown. Currently, I can only achieve this functionality statically. selectedEventGroup: string[]; //this variable stores the user's ...

What is the equivalent of specifying globalDevDependencies for npm @types packages in typings?

I am looking to update a project using tsc@2 and remove typings from my toolchain. Updating common dependencies is easy as they are listed in my typings.json file: "dependencies": { "bluebird": "registry:npm/bluebird#3.3.4+20160515010139", "lodash": ...

Extension for VSCode: Retrieve previous and current versions of a file

My current project involves creating a VSCode extension that needs to access the current open file and the same file from the previous git revision/commit. This is essentially what happens when you click the open changes button in vscode. https://i.stack. ...

What are the signs that Angular 2 code has been written in HTML for display within a div using innerHTML?

Let's frame the question differently: In my Application, I have a button: <div #displayDiv></div> <button (click)="genTable()"></button> The function in the component is as follows: @ViewChild('displayDiv') div: E ...

Tips for setting up a Nuxt build with TypeScript capabilities

Trying to create a Nuxt.js app by using the "npm run build" command, specifically executing "nuxt build," has become quite challenging for me. Sadly, the production build continuously fails because it seems like Nuxt is struggling with compiling Typescrip ...

Calculating the number of days between two dates with angular

I need assistance with my application. I have an API response that includes a message sent date, and I am looking to calculate the difference in days between the current date and the date from the API response using Angular 8 along with map in ngFor. Here ...

Encountering difficulties when attempting to load a module with the "js" extension in a TypeScript environment

When making a GET request with Systemjs, the extension .js is not being added to the URL. These are my TypeScript Classes customer.ts import {Address} from "./Address"; export class Customer { private _customerName: string = ""; public Customer ...

Avoid assigning an `any` value in an unsafe manner, especially when using a custom hook function

export const useSpecificHook = () => { return useContext(OurContext); }; export const useCustomProcessor = () => { const [notes, setNotes] = useState([]); const removeItems = () => { setItems([]); }; return { clearNotes, } ...

Utilizing a string as an argument in a function and dynamically assigning it as a key name in object.assign

Within my Angular 5 app written in TypeScript, I have a method in a service that requires two arguments: an event object and a string serving as the key for an object stored in the browser's web storage. This method is responsible for assigning a new ...

Are TypeScript Date Formatting options comparable to those found in .NET?

When working with C# .NET, adjusting the Format of a date is simple: DateTime date = new DateTime(); string date1 = date.ToString("dd MMM yy"); string date2 = date.ToString("yyyy/MM"); string date3 = date.ToString("MMMM d, yyyy"); However, I'm curio ...