Performing a search within an ElementArrayFinder

My journey of learning protractor has been quite an adventure, especially since I am relatively new to JavaScript. I have discovered that protractor queues all promises and they can be executed using then(). However, I am currently facing an issue with using a filter() on an ElementArrayFinder as it does not seem to execute properly. Only when I prepend it with the return keyword does the filter get executed, but then I exit my function which is not my intention. Can anyone help me understand this better?

Here is the code I am working with:

it('Select service', function() {
 servicePage.services.filter(function(elem, index) {
      return elem.getAttribute('class').then(function(attribute) {
          console.log('*****' + attribute);
          return attribute === 'service passive';
      });
  });
servicePage.services.get(0).element(by.tagName('input')).click(); 
});

When running the above code, the console log is not displayed indicating that the filter function may not be executing. When I modify the code as shown below, the filter is executed but the click() function is not performed.

it('Select service', function() {
 return servicePage.services.filter(function(elem, index) {
      return elem.getAttribute('class').then(function(attribute) {
          console.log('*****' + attribute);
          return attribute === 'service passive';
      });
  });
servicePage.services.get(0).element(by.tagName('input')).click(); 
});

Another Example:

    it('Select service', function() {
      servicePage.services.filter(function(elem, index) {
        return elem.getAttribute('class').then(function(attribute) {
          console.log('*****' + attribute);
          return attribute === 'service passive';
      });
  }).first().element(by.tagName('input')).click();
});

Thank you in advance for your assistance! Best regards

Answer №1

To interact with the element returned by the filter function, you need to capture it first and then perform the desired action. The filter() function selects elements based on specified criteria. In this scenario, it returns an element with a class attribute of service passive. If there are multiple elements that meet this criteria, you may have to use the get() function to target the specific element for further actions. Here's how you can achieve this:

servicePage.services.filter(function(elem, index) {
      return elem.getAttribute('class').then(function(attribute) {
          console.log('*****' + attribute);
          return attribute === 'service passive';
      });
}).element(by.tagName('input')).click(); //click on the single matching element

If there are multiple matching elements, replace the last line with the following code snippet:

}).get(1).element(by.tagName('input')).click(); //click on the second element in the array of matching elements

I hope this explanation proves useful.

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

Unable to authenticate with Firebase using ReactJS

I am currently working on developing a basic registration and login system using firebase authentication. However, I am facing an issue where the user appears to be saved when I restart the site in console.log, but the application redirects them back to th ...

What is the process of combining two identical objects in Angular JS?

Is it possible to merge and sort two objects in Angular JS that have the same fields, notifications.fb and notifications.tw, based on their time field? ...

AngularJS - Textarea not resetting content on ng-click event

Having an issue with my textarea. When attempting to clear it using ng-click, nothing happens... Can anyone provide assistance? Here is my code for testing: My app If you prefer to view it here: HTML : <div ng-controller="Ctrl1"> <d ...

Ways to invoke a prop function from the setup method in Vue 3

I encountered the following code: HTML: <p @click="changeForm">Iniciar sesion</p> JS export default { name: "Register", props: { changeForm: Function, }, setup() { //How do I invoke the props change ...

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Implement a while loop that continuously prompts the user to enter a color. If the color entered matches a CSS property such as blue, red, or #000000: The background will change accordingly, but if the user enters an incorrect color, a message will be dis ...

What is the best way to transfer variables from an ng-template defined in the parent component to a child component or directive?

Is there a way to pass an ng-template and generate all its content to include variables used in interpolation? As I am still new to Angular, besides removing the HTML element, do I need to worry about removing anything else? At the end of this ...

Modifying icons with JavaScript

When I click on the play icon, it changes to the pause icon. However, I am only able to change the first icon from play to pause in my JavaScript code. How can I apply this functionality to all the audio elements on the page? let playIcon = "https://ima ...

Error: WebDriverManager Type Mismatch

Currently experimenting with webdrivermanager for selenium Running Python version 2.7.13. Executing a background setup to configure webdriver based on the provided documentation. from selenium import webdriver from webdriver_manager.chrome import Chrome ...

Ways to apply the .not selector efficiently in jQuery

I have a situation with two separate divs, one named task1 and the other named task2. Each of these tasks contains panels with various names. Within task2, there is a duplicate name (Greg), who also belongs to the duplicate class. I'm trying to figure ...

Straining data in text input fields using bootstrap

Looking for a way to filter data with bootstrap/jquery without using tables, just div rows and columns. Check out an example of how my form looks Here's a snippet of my code: <div class="row"> <div class="col-md-4"> <input class= ...

Cucumber: Step not recognized despite being defined

I have a dilemma with my step implementation When I attempt to use /^entity URI "([^"]*)"$/ do |arg1| @entityUri = arg1 end in my code, it doesn't seem to work as expected. To make matters worse, when I tried copying this step from an existing fea ...

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

Is there a way to verify the existence of a user in mongoose?

Currently, I am attempting to verify the existence of a user with the code below: const userExist = await User.find({ username: req.body.username }); if (userExist) return res.status(400).send({ message: "User already exists" }); However, eve ...

Is it possible to execute PHP without using Ajax when clicking on a Font Awesome icon?

So, besides using Ajax, is there another solution to achieve the same result? Can a font-awesome icon be turned into a button without Ajax? In case you're unfamiliar with what I mean by a font-awesome icon, here's an example: <i id="like1" on ...

Selenium web driver error: element reference is outdated and no longer connected to the page document

I am encountering an issue with a dropdown on my webpage. The first time I select an element by index it works fine, but when I try to select another element for the second time, it throws a stale element reference error. I've attempted using a try-ca ...

The function client.guilds.find cannot be located

Hey there! I've been tasked with working on a Discord bot that requires several dependencies to function properly. I've installed the necessary dependencies and attempted to run the bot using 'forever -o out.log bot.js'. However, I enc ...

Is there a way to dynamically load a JSON configuration during runtime within a React application?

I am working on a React app that includes static content and does not use Node.js. I am in need of loading a configuration file in JSON format during runtime. The configuration file must be loaded in runtime because it needs to contain different data depe ...

What is the best way to enforce constraints on three keys when validating an object using Joi?

Currently experimenting with Joi for object validation. Able to validate objects with constraints on two keys using any.when(). Now looking to implement validation with constraints on three keys, for example: var object = { dynamicPrize: false, ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

Ensuring Node.js backend JavaScript waits for completion of my bash script before proceeding

Running three bash commands through a Node.js code snippet. Here's a portion of the script: exec(str, function(error, stdout, stderr){ console.log('stdout:'+stdout); console.log('stderr:'+stderr); if(error!=null){ ...