Navigating through various locators with Protractor to fill an array

Currently utilizing protractor, my aim is to iterate through a collection of locators (each with unique identifiers) in order to retrieve the displayed text and then compare it against an array of expected values.

I have encountered examples similar to the following:

var expected = ['expect1', 'expect2', 'expect3'];
var els = element.all(by.css('selector'));
for (var i = 0; i < expected.length; ++i) {
    expect(els.get(i).getText()).toEqual(expected[i]);
}

This allows for comparison against children of a specific locator, but not across multiple locators.

How could I modify the above example to loop through a list of different locators as shown below, and then compare them to respective values from another array?

const locators = {
    emp: by.id('employmentError'),
    occ: by.id('occupationError'),
    stat: by.id('statError'),
    show: by.id('showError')
};

The comparison itself seems straightforward, but figuring out how to populate the initial array with text from various locators is the challenge I'm facing.

javascriptarraysprotractor

Answer №1

It seems that you are attempting to gather elements related to various error types. Have you considered retrieving all of them using a consolidated locator, for example:

var errors = $$("[id$=Error]");
expect(errors.getText()).toEqual([
    "Encountered Employment Error",
    "Error occurred during processing"
]);

In this scenario, the variable errors would target elements with id attributes ending with "Error".

Answer №2

It's important to keep in mind that Protractor methods always return promises, making it safer to utilize promises for asynchronous operations. Give the code snippet below a try: 

const elements = {
    emp: element(by.id('employmentError')),
    occ: element(by.id('occupationError')),
    stat: element(by.id('statError')),
    show: element(by.id('showError'))
}; 
var promises = [], texts = [];
var allElements = element.all(by.css('selector'));
allElements.forEach(function(el) {
  el.getText().then(function(text) {
    texts.push(text);
  });
});
for (var key in elements) {
  promises.push(elements[key].getText());
}
expect(protractor.promise.all(promises)).to.become(texts);

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

Countdown timer that counts down in reverse when the browser is minimized

I am currently working on a JavaScript project where I have implemented a countdown timer in seconds. Once the timer hits zero, it triggers a specific function. The timer functions correctly, however, if the browser enters sleep mode or is minimized, the ...

javascriptjquery

Notify when a certain element's ID is visible on the screen using the jQuery appear method

Having trouble getting this plugin to cooperate: https://github.com/morr/jquery.appear I attempted to reference the plugin from a CDN using Ajax: http://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js Why isn't it working as expe ...

javascriptjqueryajaxjquery-pluginsviewport

Unable to retrieve function variables stored in fancytree source nodes within its activate method

If the configuration of my fancytree includes a source like this: source: [{ title: "Item1", key: "1", myFunc: function (item) { return 'function'; ...

javascriptjqueryfancytree

Numerous Radio Buttons

I am currently working on creating a quiz similar to those found on Buzzfeed and Zimbio. I apologize if this question has been asked before, but despite my efforts in searching, I have not been able to find the answer I am looking for. In this quiz, partic ...

javascriptjqueryhtml

using an array as an argument in the filtering function

Is there a way to pass an array to the filter method in JavaScript? I have successfully filtered an array using another array. However, my filter array currently has a global scope. How can I pass the array to make my code cleaner? var array = [1, 2, 3, ...

javascriptarrays

React - Page Loads with Empty Query Parameters

Seeking assistance with navigation logic in React, I'm encountering an issue that requires some guidance. I have developed a front-end web app using TypeScript, React, and Ionic Framework V5. The app features a standard search box that redirects use ...

javascriptreactjsionic-frameworkreact-routerreact-router-dom

How to retrieve the outcome of a stored procedure using node.js

Is it possible to retrieve multiple select results from distinct tables (many rows) in just one stored procedure in mysql and then access those results in nodejs? In .NET with SQL Server, we can use "sqlnextresult" for this purpose. VIEW IMAGE FROM STORE ...

javascriptmysqlnode.js

Leveraging event listeners in conjunction with React's useEffect function

Check out the code example on Code Sandbox here Hey there, I'm trying to implement a feature where clicking a button inside a container displays a box. I've set up an event listener so that when you move your mouse outside the container, the box ...

javascripthtmlreactjstypescript

Accessing a variable outside of the component constructor will result in the variable being

Currently, I am tackling a project that involves React and Electron. However, I have encountered an error that is causing some confusion. The issue revolves around a component with a constructor that receives props in the form of two variables. This constr ...

javascriptreactjsconstructorelectron

Replace the checkbox display heading with a text box in the designated area

I'm new to using kendo ui Currently, I am attempting to show a text box in the first column header. Instead of the checkboxDisplay heading, I want to replace it with a text box. Could someone please provide guidance on how to resolve this issue? Here ...

javascripthtmlangularjskendo-uikendo-grid

Is there a way to export a specific portion of a destructuring assignment?

const { a, ...rest } = { a: 1, b: 2, c: 3 }; If I want to export only the rest object in TypeScript, how can I achieve that? ...

javascripttypescriptecmascript-6

Guide to forming a JavaScript array from nested JSON data

Looking to parse through an array of objects related to London weather data from the OpenWeatherMap API. How can I create three distinct arrays in JavaScript, each with variable names "dtArray", "tempMinArray", and "tempMaxArray", containing only values f ...

javascriptarraysjson

Updating data from an ajax call in chart.js can be done with a few simple steps

I have successfully generated a graph using data from an ajax call in a php file. Now, I want to enhance this graph by allowing users to select a specific customer from a drop-down list (chg_customer) and display the corresponding count on the chart. Altho ...

javascriptphpajaxchart.js

Extract the body.req object within a loop in a Node.js application

I'm looking to efficiently parse and save the body of a POST request using Mongoose in Node.js. Is there a way to use a for loop to accomplish this task, rather than manually saving every property? My ideal solution would involve something like: for ...

javascriptjsonnode.jsexpresspost

What You See Is What You Get - A versatile tool for editing both text and

As a developer, I have encountered a common need that StackOverflow addresses. Situation I am in the process of creating a website where users can post code examples and articles using an admin system. These posts may be created by me or registered fron ...

javascriptxmljquery-pluginstinymcewysiwyg

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

One exciting feature is the drag and drop component that allows users to add multiple files. However, there seems to be an issue with displaying the content of a JSON file once it's added. Below is the code snippet in question: if (files?.length) ...

javascriptreactjsjsontypescriptblob

What is the best way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

javascriptjqueryrubyajaxruby-on-rails-3

Obtaining a File type object from a URL (specifically an image) in Vue.js

Suppose I have an image URL like http://localhost/sample.jpg. What is the best way to save this image URL into a File object using native JavaScript API in my component? export default { created () { const imageUrl = 'http://localhost/sample.jpg ...

javascriptvue.jsvuejs2

Troubleshooting a bug in React TypeScript with conditional logic

I have a new message button and a few conversations. When I click on a conversation, the right side should display the message box. Clicking on the new message button should show the create new message box. Here are my useState and handlers: const [newMess ...

javascriptreactjsjsxuse-statereact-typescript

Are there any similar tools to Graphstream in Java that can be used with HTML5 using canvas and JavaScript?

GraphStream is a revolutionary graph library created in Java that offers Java developers a simple way to visually represent dynamic graphs either in memory, on screen, or in files. Check out this demo video. With GraphStream, you can effectively handle th ...

javajavascripthtmlcanvasgraph