Unable to iterate over an array to compare text values, encountering a non-defined outcome when using Protractor

Currently, I am navigating the waters of protractor and JavaScript as a newcomer. The main challenge I am facing involves comparing a delimited string to an array.

My objective is to retrieve a collection of all elements and then iterate through each one, checking their text values against the delimited string. However, the delimited string's values are consistently displaying as 'undefined'.

element.all(by.css('.itemField')).then(function (allFieldItems) {
  var toCompare = ["AGO", "9"]
  for (var i = 0; i < toCompare.length; i++) {
    var valueToCompare = toCompare[i]
    allFieldItems[i].getText().then(function (text) {
      if(text != valueToCompare){
        console.log("Values don't match")
          }
        }.bind(i))
      }
})

The issue lies in the line "if(text != valueToCompare)" where "valueToCompare" is always recognized as 'undefined'. I am seeking guidance on how to rectify this concern without relying on expect statements.

javascriptangularjstestingprotractor

Answer №1

If you want to compare values from an array called toCheck with the text retrieved using element.all(), you can do it directly like this:

var toCheck = ["Apple", "Orange"];
element.all(by.css('.foodItem')).getText().then(function (texts) {
    for (var i = 0; i < toCheck.length; i++) {  
        if (texts[i] !== toCheck[i]) { 
            console.log("Values do not match");
        } 
    }
});

You could also use an assertion if that's what you intended to do:

expect($$('.foodItem').getText()).toEqual(toCheck);

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

I am wondering how to create a heartbeat using 3.JS and Leap Motion technology

Recently, I created a scene featuring my 3D model of a heart, imported from Blender. Integrating it with a Leap Motion device allows users to control the movement and rotation of the heart model. My goal is to implement a function that will cause the hea ...

javascriptthree.jsblendercinema-4d

Creating interactive table columns in ASP.NET MVC Razor with AngularJS for a dynamic user experience

For my assignment, I am working on creating a dynamic table in ASP.NET MVC Razor. The challenge is to add a new column at runtime when the user fills all the rows of the first column. There is no set limit for the number of columns, and a new column should ...

c#asp.netasp.net-mvcangularjsrazor

The key to subscribing only once to an element from AsyncSubject in the consumer pattern

When working with rxjs5, I encountered a situation where I needed to subscribe to an AsyncSubject multiple times, but only one subscriber should be able to receive the next() event. Any additional subscribers (if still active) should automatically receive ...

javascripttypescriptecmascript-6producer-consumerrxjs5

I'm looking to add CSS transitions, like fade-ins, to a list of items in React in a way that the animations occur one after the other upon rendering. How can this be achieved?

I've scoured the depths of Stack Overflow and combed through countless pages on the internet in search of an answer to my query, but alas, I have not found a solution. So, my apologies if this question is a duplicate. Here's my conundrum: https ...

javascriptcssreactjscss-animationscss-transitions

"Encountering an error when trying to access undefined property in templates

The content displayed in my component template is not what I expected when using @Output to pass an object from a parent container. While attempting to bind {{selectedMovDetail|json}} in the template, the output shows as { "name": "The Walking Dead","rati ...

javascriptjsonobjectangular

Angularjs failing to display content

I recently acquired a sample Angular application from https://github.com/angular/material-start Upon attempting to open the index file, I found that it only displays raw Angular syntax and the pages do not render properly. Is there a solution to this is ...

angularjs

If the checkbox is selected, retrieve the product name and price and store them in an array

If the checkbox is checked, I want to retrieve the service name and its price in an array. To get the values of the selected items (i.e. service name and its price in an array), please explain how I can achieve this. $(document).on('click', &apos ...

javascripthtmljqueryjquery-uilaravel-5

Setting a timeout from the frontend in the AWS apigClient can be accomplished by adjusting the

I am currently integrating the Amazon API Client Gateway into my project and I have successfully set up all the necessary requests and responses. Now, I am trying to implement a timeout feature by adding the following code snippet: apigClient.me ...

javascriptangularamazon-web-servicessettimeoutaws-api-gateway

"Optimizing npm packages for front-end web development in vanilla JavaScript: A guide to bundling for production deployments on

My website is built using vanilla HTML/CSS/JavaScript with ES6 modules and can be deployed to GitHub pages and Netlify. I have set up my site by importing "main.js" in my HTML like this: <script src="js/main.js" type="module" defer&g ...

javascriptnpmnetlifyjamstack

New alternative to AngularDart's Batarang tool

Looking for recommendations on an alternative to Angular.js that has similar functionality to Batarang for easier debugging of scopes and bindings. Any suggestions? ...

angularjsdartangular-dartbatarang

Attempting to deploy my initial Google Cloud Function, encountering an error message indicating that Express is not detected

Currently in the process of deploying my first Google Cloud function, the code for which can be found here: https://github.com/rldaulton/GCF-Stripe/blob/master/Charge%20Customer/index.js The code starts with the following line: var app = require('e ...

javascriptexpressgoogle-cloud-functions

What steps do I need to take to configure a grunt task that will automatically start my express server?

I'm searching for a simpler solution than using grunt-express, which seems to take over too many options and assumptions. All I really need is the ability to run coffee server.coffee from Grunt and have it continue running until another process stops ...

node.jsseleniumcoffeescriptgruntjsprotractor

Automatically clicking on a button upon page load, similar to how it's done in an

If I needed to automate the clicking of a button element within an iframe, how can I achieve this? function autoClick() { document.getElementById('u_0_4').contentWindow.document.getElementById("u_0_5").click() } <div onload="autoClick()" &g ...

phpangularjsnode.jslaravel

The object retrieved from the AJAX call is not defined on the client's server specifically

I am dealing with a web app issue where an AJAX call is functioning as expected on local and test servers, but not on the client's end. The client reported that after some changes were made to the architecture of the app and it was reuploaded to thei ...

javascriptjqueryjson

Is it possible that the rows variable is not updating correctly due to an issue with the setState function, resulting in the changes not being displayed in

This code serves a similar purpose to a ToDo List feature. The add button is intended to add an array object to the list of rows, which are displayed in the UI as TextFields through iteration with rows.map. The subtract button should remove the selected ro ...

javascriptreactjsreact-hooksuse-state

Emulating ArrowRight event using React Testing Library

I am facing a challenge with the React-Testing-Library. Within my application, I have two components called HeroesScreen and HeroesDiamondBar. The HeroesDiamondBar component is rendered inside the HeroesScreen component once the currentStep state variable ...

javascriptreactjsjestjsreact-testing-library

Not triggering onDragStart in Material UI Autocomplete component in React

I'm facing an issue with an onDragStart handler in a React Autocomplete component. Despite adding the handler, it fails to trigger when dragging using the mouse. You can explore a live demo of this problem here: https://codesandbox.io/s/material-demo- ...

javascriptreactjsmaterial-ui

I am currently working on integrating a Netlify form into a contact form using React.js

I attempted various strategies but couldn't achieve any progress. I also consulted this post However, none of the suggestions seemed to work for me. Is there any other way to accomplish this? import React, { Component } from 'react'; impor ...

javascripthtmlreactjsformsnetlify

Triggering the Vuetify select/autocomplete/combobox menu to open upon focusing on it

I'm working on implementing a Vuetifyjs Autocomplete feature. My goal is to have the menu open when the user focuses on it using the tab key after entering information in a previous input field. Below is a snippet of the code I am using: <div id=" ...

javascriptvue.jsvuetify.js

What is the best way to retrieve every single element stored in an Object?

On a particular page, users can view the detailed information of their loans. I have implemented a decorator that retrieves values using the get() method. Specifically, there is a section for partial repayments which displays individual payment items, as d ...

javascriptarraysreactjstypescriptdecorator