What is the best way to access a nested promise element in Protractor?

Question

What is the best way to access a nested promise element in Protractor?

I've recently put together a function in protractor that I'd like to share:

function findChildElementByText(parentElement, tagName, textToSearch)
{
    return parentElement.all(by.tagName(tagName))
    .then((items) => {
      items.map( item => {
        item.getText().then(text => {
          if (text === textToSearch){
            return item;
          }
        });
      });
    });
}

Here's an example of how you can use this function to locate <option> elements within a <select> element:

let myitem = selectorHelpers.findChildElementByText(clientIdSelect, 'option', 'ExampleText');
myitem.click();

However, when I try to click on the element, I encounter the following error message:

Failed: myitem.click is not a function

Can someone help me modify this function so that it returns the correct item based on the text criteria and enables me to click on the element as illustrated in the example above?

javascript selenium protractor

Answer 1

Answer №1

It may not always be ideal to use the map method for retrieving a single element. This is because map creates a new array based on the returned value of each item.

Instead, you could consider utilizing a for...of loop or a traditional for loop to iterate over each item. Incorporating async / await will allow the program to wait for each item.getText() operation to resolve before moving on to the next item. If the awaited result matches the textToSearch, the function can return the item object. Otherwise, null can be returned after completing the loop.

function getChildElementByText(parentElement, tagName, textToSearch) {
  return parentElement.all(by.tagName(tagName))
    .then(async items => {
      for (const item of items) {
        const text = await item.getText();
        if (text === textToSearch) {
          return item;
        }
      }
      return null;
    });
}

Answer 2

It may not always be ideal to use the map method for retrieving a single element. This is because map creates a new array based on the returned value of each item.

Instead, you could consider utilizing a for...of loop or a traditional for loop to iterate over each item. Incorporating async / await will allow the program to wait for each item.getText() operation to resolve before moving on to the next item. If the awaited result matches the textToSearch, the function can return the item object. Otherwise, null can be returned after completing the loop.

function getChildElementByText(parentElement, tagName, textToSearch) {
  return parentElement.all(by.tagName(tagName))
    .then(async items => {
      for (const item of items) {
        const text = await item.getText();
        if (text === textToSearch) {
          return item;
        }
      }
      return null;
    });
}

What is the best way to access a nested promise element in Protractor?

Answer №1

Similar questions

Google Chrome repeatedly crashes when running several instances of Chrome Driver

The execution of babel-node falters while the babel cli functions flawlessly

Is it possible to access the chrome://webrtc-internals/ variables through an API in JavaScript?

Sort through the API's array

Explore how Next.js's getServerSideProps feature incorporates loading animations and improves

Switching between different elements in an array using React

Struggling to retrieve the accurate input value when the browser's return button is clicked?

Error encountered: Selenium unable to locate element exception when attempting to log in to OneDrive website (attempted various methods of locating elements

Utilizing Vue refs to set focus on a specific element target

How can the Angular Js framework be utilized to create a pop-up feature in combination with Bootstrap?

What is the best way to make an HTML form show fields depending on certain conditions?

jQuery's feature to select all elements except one and its children appears to be malfunctioning in Safari

How to combine two tables in Sequelize using a one-to-many relationship

AngularJSError

Initiate a $digest cycle externally

Is there a way to trigger the second function once the first one has been completed?

The current status of the ajax call is set to 0

Multipart form data processing without specifying files

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

Searching for the XPath of a specific file selection button can be done easily by using