Unable to select an element with numerous choices available

I am attempting to click on an element in the following manner, but I keep encountering an error message that says:

Failed: Cannot read property 'click' of undefined

Here is the code snippet causing the issue:

'use strict;'
var PresentPage = function(){
    let PresentPageTitle = element(by.xpath("//*[@id='planAndDev']/div/div/div/div/matanot/form/div[2]/h4"));
    let UserPhone = element(by.id("tel"));
    let Email = element(by.id("email"));
    var AresForPresents = element(by.xpath("//*[@id='verticalRadioGrp']/div/select")).all(by.tagName("option")).then(function(options)
    { 
      return options;
    });
     this.SelectAreaToGetPresent = function()
    { 
        AresForPresents[3].click(); 
    };
};
module.exports = new PresentPage();

EDIT: It works fine when used inside a function.

this.SelectAreaToGetPresent = function()
    { 
      element(by.xpath("//*[@id='verticalRadioGrp']/div/select")).all(by.tagName("option")).then(function(options)
    { 
       options[3].click();
    });

Answer №1

Seems like there is an issue in your code with handling promises.

var GiftsForFriends = element(by.xpath("//*[@id='verticalRadioGrp']/div/select")).all(by.tagName("option"));
this.ChooseGiftArea = function()
{ 
    GiftsForFriends.then((options)=> { options[3].click(); }); 
};

If not, consider using async/await.

var GiftsForFriends;
this.ChooseGiftArea = async ()=>
{ 
    GiftsForFriends = await element(by.xpath("//*[@id='verticalRadioGrp']/div/select")).all(by.tagName("option")); 
    GiftsForFriends[3].click();
};

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

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

Looking for assistance in streamlining JavaScript for loops?

I am currently working on a project involving a random image generator that displays images across up to 8 rows, with a maximum of 240 images in total. My current approach involves using the same loop structure to output the images repeatedly: var inden ...

What is the best way to handle a form with nested components in React?

I have successfully developed a form that changes dynamically, incorporating my own components. However, I am facing the challenge of extracting information from this form because the select tag exists only in the children components. After some research, ...

What could be causing the type error to show up in my JavaScript file?

Why is this error occurring? I am currently studying web development through Colt Steele's web bootcamp and encountered this issue. $ node user.js mongo connection is open D:\web development practice\mongoose_relationship\Models\u ...

Exploring the possibilities of using JPEGcam in conjunction with the powerful

<script language="JavaScript"> webcam.set_api_url( 'test.php' ); webcam.set_quality( 90 ); // JPEG quality (1 - 100) webcam.set_shutter_sound( true ); // play shutter click sound </script> I am exploring the u ...

Selenium web driver is showing an error message: "*:-webkit-full-screen-ancestor" selector is invalid

Previously, this code was functioning correctly, but now when I run it, I consistently encounter an exception. The purpose of the code was to input a search query into the YouTube search bar and then click on the search button. Code: WebDriver driver = n ...

The output from `http.send` on the Node + Express backend is displayed as [object object]

When I make a request using http.send in my Node.js backend, it returns [object object]. <script> const newExerciseForm = document.getElementById("newExercise"); newExerciseForm.addEventListener("submit", function (e) { e.pre ...

retrieving a map containing the values from an array using the `.includes()`

Currently, I am attempting to map my routes based on the roles they possess. For example, my mapped routes may have roles like ["User", "Admin"] or just ["Admin"]. The current user can have one or multiple roles assigned to them. This particular function w ...

Utilize React Redux to send state as properties to a component

When my React Redux application's main page is loaded, I aim to retrieve data from an API and present it to the user. The data is fetched through an action which updates the state. However, I am unable to see the state as a prop of the component. It s ...

Keep moving forward in Sailsjs even after sending back a response with res.json();

It will keep running even if the condition is met and the code inside return res.json() gets executed. _.each(rooms, function(room){ if(room.users.length == users.length) { return res.json(room); // <-- returns but execution continues } ...

Combining the power of jQuery with the versatility of HTML5's geo location feature,

Recently on the forum, I sought assistance with my geo location manager as I encountered a dilemma. I realized that the geo location is asynchronous, but I prefer it to be synchronous for easier programming. Credit goes to making3 for providing the soluti ...

What is the best method to invoke a function recursively with a delay of 1 second following the completion of an ajax

I am facing a situation where I need to implement a delay of 1 second after an ajax request is completed, regardless of the outcome. Instead of calling a method every second, I specifically want to call a function 1 second after the ajax request finishes. ...

Image of sprite is not displayed

Having trouble displaying a sprite. Here is the HTML file : <head> <script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.7.5/phaser.min.js"></script> </head> <body> <div id="game"></div& ...

Customize your webpage's style to reflect your unique identity with user

Is there a way to allow users to customize the style of a webpage? I know I need multiple CSS files, but how can I implement the code that enables this customization based on user preferences? ...

Ways to split JSON information into several pages?

I am currently facing an issue with my HTML code. It works perfectly fine for a small JSON file, displaying the data in an HTML table as expected. However, when I try to load a larger JSON file with around 15,000 rows of data, my page becomes unresponsiv ...

"Exploring the integration of user input with a three.js canvas: Step-by

Welcome to the STL Viewer: import * as THREE from "https://threejs.org/build/three.module.js"; import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js"; import {STLLoader} from "https://threejs.org/e ...

Using a for loop in JavaScript to dynamically generate HTML content within a Django project

Do you have a unique question to ask? Version: Django version 3.0.8 This block contains my JavaScript code: fetch(`/loadbox/${message.id}`) .then(response => response.json()) .then(dialog => { let detailcontent= `<div class=" ...

Using JavaScript regular expressions with a forward slash included in the string

My node application is connected to mongodb using the native driver. Within my documents, there is a field called "parent" with values like "parent":"root/test/dir/". I am attempting to retrieve all documents where the "parent" field contains "root/test" ...

Why are imported modules unable to reach global variables in Node?

As I delve deeper into using ES6 and organizing my code across multiple files for better readability and version control, I've encountered an issue that has me puzzled. In one of my scenarios, I have a class defined in a separate file called class.js, ...

Vue Checkboxes - Maintain selection unless a different checkbox is selected

I have implemented a checkbox system with radio button behavior, but I am facing an issue where I want to keep the checkbox checked until another checkbox is selected (which will then uncheck the first one). I do not want the ability to deselect the checkb ...