The drop down list does not support the 'click' function and is throwing a TypeError

Could someone please assist in troubleshooting my code? I am trying to select a specific value from a dropdown list but is encountering difficulties. The code is able to retrieve the values from the dropdown but is unable to successfully click on the matching value. Any help would be greatly appreciated. Below is the code in question:

async getDropDownHeaderMenu(selectedOption:string){
    let headersCols = element( by.css('#abc'));
    await browser.wait(until.presenceOf(headersCols), this.DEFAULT_WAIT_TIME_SECONDS * 1000, 'failed to find dropdowns!');
    headersCols.click();
    let valuesSet: Set<string> = new Set();
    let promisesArray = [];
    return new Promise((resolve, reject) => {
        element.all(by.css('div.abc')).map((option) => {
            promisesArray.push(option.getText());
        }).then(() => {
            protractor.promise.all(promisesArray).then((results) => {
                for(let result of results) {
                    console.log("Getting the drop down values = " + result);
                    // store the values in result and match it with given input
                    valuesSet.add(result);
                    if(result === selectedOption){
                        browser.executeScript('window.scrollTo(0,document.body.scrollHeight)').then(()=>{
                        //// This is where the error pops up
                            result.click();
                            browser.sleep(10000);

                        });
                        //result.click();
                      // break;
                    }
                }

            }).then(() => {
                expect(valuesSet.size).not.toEqual(0,
                    "The returned string set from drop down list was empty!");
                resolve(valuesSet);
            });
        }).catch((error) => {
            reject(error);
        });
    });
}

Answer №1

const fetchDropDownOptions = async (selectedOptionValue:string)=>{
    let dropdownMenu = element( by.css('#abc-select'));
    await browser.wait(until.presenceOf(dropdownMenu), this.DEFAULT_WAIT_TIME_SECONDS * 1000, 'failed to locate the dropdown menu arrow!');
    dropdownMenu.click(); //trigger the display of dropdown menu
    let optionValuesSet: Set<string> = new Set();
    let promises = [];
    return new Promise((resolve, reject) =>{
        element.all(by.css('span.abc-text')).map((optionElement) =>{
            promises.push(optionElement.getText()); //store text of each dropdown option
        }).then(() =>{
            protractor.promise.all(promises).then((optionResults) =>{
                for(let resultText of optionResults) {
                    console.log("Fetching dropdown option = " + resultText);
                    // store the dropdown options and compare with selected input
                    optionValuesSet.add(resultText);
                    if(resultText === selectedOptionValue){
                    //locate the matching option in the dropdown array based on index
                         let selectedDropdownItem = element.all( by.css('span.abc-text')).get(optionResults.indexOf(resultText));
                        browser.wait(until.presenceOf(selectedDropdownItem), this.DEFAULT_WAIT_TIME_SECONDS * 1000, 'failed to load the selected option in the dropdown.');
                        browser.executeScript("arguments[0].scrollIntoView();", selectedDropdownItem.getWebElement());
                        selectedDropdownItem.click(); //stop iteration once the option matches the selected input
                        break;
                    }
                }

            }).then(() =>{
                expect(optionValuesSet.size).not.toEqual(0,
                    "The dropdown option set was empty!");
                resolve(optionValuesSet);
            });
        }).catch((error) =>{
            reject(error);
        });
    });
}

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

Creating a progressive prototype chain in TypeScript: A step-by-step guide

With JavaScript, it is possible to create a "derived class" whose "base class" is dynamic using code like the following: function NewBaseClass(sF) { function DynamicBaseClass(iF) { this.instanceField = iF; } // EDIT: oops, this is not really static i ...

Having trouble accessing an injector service within the promise of a dynamically loaded JavaScript function that has been assigned to a global variable

Query I am facing an issue while trying to integrate PayPal with Angular. I am encountering difficulties when attempting to call an injected service inside a function of the promise returned. Any assistance in resolving this would be greatly appreciated. ...

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime

I recently upgraded an older Angular.js application from Typescript 2.7 to 3.5 and successfully compiled it using tsc.exe. During application runtime, I encountered an error message in certain parts of the code: TypeError: Cannot read property 'Enu ...

Is there a way to retrieve all potential string literals from an Array<>?

Can something similar be achieved in TypeScript? const options: Array<'Option1' | 'Option2' | 'Option3'> = []; // specify all available options: 'Option1' | 'Option2' | 'Option3' as show ...

Tips for locating a particular row in Protractor

Can you explain how the solution discussed in this Stack Overflow thread works? I'm interested in understanding the specific logic behind selecting ID0001 in the code snippet provided below: element.all(by.repeater('item in $data track by $index ...

Leveraging the power of literal types to choose a different type of argument

My API is quite generic and I'm looking for a typed TypeScript client solution. Currently, my code looks like this: export type EntityTypes = | 'account' | 'organization' | 'group' export function getListByVa ...

Learn the proper way to specify the return type of a function as a class, rather than an instance, in Typescript

Is there a way to declare that a function returns a generic class definition? I have tried the following for non-generic classes, but it does not work for generic ones: export function composeAll(composeFunction: Function, depsFunction: Function): (compon ...

Error in Typescript: Unable to locate module with proper type declarations

Recently embarking on a new nodejs project with typescript, I utilized Typings (https://github.com/typings/typings) to install reference files for node v4.x and express v4.x. Outlined in my setup are the following versions: Node - v4.2.6 Typescript - v1 ...

Error TS2322 occurs during compilation in Typescript when using ng.IPromise

Having some issues while using Angular 1.x with Typescript. Here is the code causing trouble: get(id): ng.IPromise<Server.MyItem> { return this.$http.get(`${this.baseAddress}/${id}`).then(d => d.data); } After compiling with tsc, I am encoun ...

Tips on preventing the need for null or undefined checks in JS/Typescript singletons that have an initialization function

Is there a way to streamline the process of handling props in an Object literal that is dynamically initialized only once? I'm looking for a pattern that would eliminate the need for repetitive null/undefined checks and throw errors when certain metho ...

The error message "TypeError: 'results.length' is not an object" occurred within the Search Component during evaluation

Having trouble with a search feature that is supposed to display results from /api/nextSearch.tsx. However, whenever I input a query into the search box, I keep getting the error message TypeError: undefined is not an object (evaluating 'results.lengt ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

What is the recommended Firefox version that works seamlessly with Selenium Webdriver 3.6.0?

My current automation setup involves using Protractor with VS Code as my IDE. While I've successfully run my scripts on Chrome, I'm experiencing failures when attempting to run them on Firefox. It appears to be a compatibility issue. Can anyone p ...

Changing a password on Firebase using Angular 5

I am in the process of developing a settings feature for user accounts on an application I've been working on. One key functionality I want to include is the ability for users to update their password directly from the account settings page. To enable ...

The dynamically rendered component cannot be assigned to the type 'IntrinsicAttributes & ContentOutlineProps & ContentBrainstormProps'

I am facing an issue on my page where a <SideBar /> component is causing a Typescript error with the setActivePage hook. The error message points to a specific line in my code: const Content: (({ question_blocks, }: ContentBrainstormProps) => JSX. ...

Prevent receiving the "deprecated warning for current URL string parser" by enabling the useNewUrlParser option

I recently encountered an issue with my database wrapper class that connects to a MongoDB instance: async connect(connectionString: string): Promise<void> { this.client = await MongoClient.connect(connectionString) this.db = this.cli ...

The Typescript error message states that the type '{ onClick: () => void; }' cannot be assigned to the type 'IntrinsicAttributes'

I'm a beginner in Typescript and I'm encountering difficulties comprehending why my code isn't functioning properly. My goal is to create a carousel image gallery using React and Typescript. However, I'm facing issues when attempting t ...

Creating a custom Angular pipe to convert milliseconds to a formatted hh:mm:ss in Angular

Struggling to develop an Angular pipe that accurately converts milliseconds to hh:mm:ss format. Despite researching several articles, none of the solutions seem to work. Here is a snippet of the current pipe.ts implementation: transform(value) { le ...

Locate the element within the specified parameters using [protractor]

Here's my query: element.all(by.repeater('user in users')).then(function(rows) { // looking to locate an element in rows using CSS selector, for example } UPDATE : I want to clarify that I am trying to find an element using rows[rows.len ...

Observable function encountering difficulties returning nested values

I've been working on a function that returns an observable. test(id: int): Observable<Group>{ this.http.get('test/').subscribe( (result:any) => { resultingVal = Group.fromJson(result.group); }); } Right now, the function ...