What is the best way to verify if the text values of a collection of DOM-nodes in an array match a specific string

Question

What is the best way to verify if the text values of a collection of DOM-nodes in an array match a specific string

My objective is to validate if all names in an array are equal to e2e. I have a set of objects generated using protractor's element.all(by.css(...). The next step involves confirming if any element within the array has a text value that differs from my requirement.

To achieve this, I attempted creating an array from the existing collection and utilized the Array.some method, as depicted below:

const accountNames = element.all(by.css('td > p:nth-child(3)'))
const notMatch = Array.from(accountNames).some(element => 
element.getText() !== 'e2e')

expect(notMatch).toBeFalsy()

I anticipate obtaining both an array of strings and a boolean outcome with regards to comparing elements against a specific text.

However, I am currently receiving an empty array. What could potentially be causing this issue?

javascript arrays object protractor

Answer 1

Answer №1

This code is functioning correctly, but I am considering if there is a more visually appealing solution:

it('filters kits by account hierarchy', () => {
mapPage.filter('e2e')
const accountNames = element.all(by.css('td > p:nth-child(3)')).getText()
.then(text => Array.from(text).some(item => item !== 'e2e'))

expect(accountNames).toBeFalsy()
})

Answer 2

This code is functioning correctly, but I am considering if there is a more visually appealing solution:

it('filters kits by account hierarchy', () => {
mapPage.filter('e2e')
const accountNames = element.all(by.css('td > p:nth-child(3)')).getText()
.then(text => Array.from(text).some(item => item !== 'e2e'))

expect(accountNames).toBeFalsy()
})

Answer 3

Answer №2

There are several techniques available for manipulating arrays of elements which can be found here. I prefer using either the filter or reduce method to achieve this.

Additionally, there are two other methods you could experiment with, although they may not necessarily be simpler than your current solution.

Using Reduce

//By using reduce, we iterate through each element in the array and 
// consolidate them into a single value (true or false in this case)
let allValuesAreE2E = $$('td > p:nth-child(3)').reduce(function (acc, elem) {
    if (!acc) return false;

    return elem.getText().then(function (text) {
        return text === 'e2e';
    });
}, 'initVal');

expect(allValuesAreE2E).toBeFalsy();

Alternatively, Filter will iterate over each element in an array and discard those that do not meet specific criteria (such as having text equal to 'e2e').

const allContainE2E = $$('td > p:nth-child(3)')).count().then(numElements => 
  return numElements === $$('td > p:nth-child(3)')).filter(element => {
        return element.getText().then(text => text === 'e2e')
      })
  })
{

expect(allContainE2E.count()).toBeGreaterThan(0) // using Jasmine

Answer 4

There are several techniques available for manipulating arrays of elements which can be found here. I prefer using either the filter or reduce method to achieve this.

Additionally, there are two other methods you could experiment with, although they may not necessarily be simpler than your current solution.

Using Reduce

//By using reduce, we iterate through each element in the array and 
// consolidate them into a single value (true or false in this case)
let allValuesAreE2E = $$('td > p:nth-child(3)').reduce(function (acc, elem) {
    if (!acc) return false;

    return elem.getText().then(function (text) {
        return text === 'e2e';
    });
}, 'initVal');

expect(allValuesAreE2E).toBeFalsy();

Alternatively, Filter will iterate over each element in an array and discard those that do not meet specific criteria (such as having text equal to 'e2e').

const allContainE2E = $$('td > p:nth-child(3)')).count().then(numElements => 
  return numElements === $$('td > p:nth-child(3)')).filter(element => {
        return element.getText().then(text => text === 'e2e')
      })
  })
{

expect(allContainE2E.count()).toBeGreaterThan(0) // using Jasmine

What is the best way to verify if the text values of a collection of DOM-nodes in an array match a specific string

Answer №1

Answer №2

Similar questions

The highest and lowest points of the visible image within a transparent PNG file

Unlock AngularJS expression through ng-click functionality

Exploring the Efficiency of jQuery AJAX and JSON Data Handling

Guide on centering an element on a screen using Selenium and Python

Exploring the differences between leveraging RxJS fromEvent and @ViewChild versus using the keyup event and RxJS Subject to detect changes in input

Implementing dynamic classes for each level of ul li using JavaScript

JNI C++ with a 3D array of floating-point numbers

Modifications to contenteditable elements result in a change to their IDs

Transforming Form Input into Request Payload for an AJAX Call

No Ajax request is being made for the WebMethod

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

Generate a selection of complementary, triadic, and monochromatic color palettes using just one hex color code

Python numpy array not checking for value in tuple

Vue Array Proxy Class Fails to Trigger Reactivity

Difficulty encountered in storing information in the database

PHP class variable not updating properly when using XMLHttpRequest

Incorporate the AngularJS controller into your JavaScript code

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

Why isn't nesting directives working in AngularJS?