Looking to automate the selection of a dropdown menu using Selenium with JavaScript

Below is the code snippet for a drop-down:

<div class="w-1/2 px-8 pt-6">
<div class="Styled__FieldWrapper-sc-1fqfnqk-1 bQZNMa mb-6">
    <label class="form-label" for="transfer.account">Transfer Account</label>
        <div class=" css-2b097c-container">
            <span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
                <div class=" css-yk16xz-control">
                    <div class=" css-1hwfws3">
                        <div class=" css-1uccc91-singleValue"></div>
                        <div class="css-1g6gooi">
                            <div class="" style="display: inline-block;">
                                <input autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-2-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;" class="">
                                    <div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 15px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"></div>
...

<p>The methods I tried are:</p>
<pre><code>  By.xpath("//input[@id='react-select-15-input']")).click(); 
  or
  By.id( "react-select-15-input")).sendKeys("David Messi");

Unfortunately, I have not been successful in selecting the dropdown via Selenium. Any suggestions?

javascriptseleniumselenium-webdriver

Answer №1

Are you currently using any framework for this task? I have noticed an error in your code:

By.path("//input[@id='react-select-15-input']")).click();

It should be xpath instead of path.

By.xpath("//input[@id='react-select-15-input']")).click();

Alternatively, you can try this in Javascript :

driver.click('drop down locator here').click('drop down value locator here')

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 capture user input text using $watch in AngularJS when applied on ng-if condition

I have developed a cross-platform application using AngularJS, Monaca, and OnsenUI. In my login view, I check if the user has previously logged in by querying a SQLite database. Depending on whether there is data in the database, I either display a welcom ...

javascriptangularjssqlite

A single Modal, Ajax, and data that is continuously refreshed

I'm currently facing a challenge in my project as I try to implement Ajax functionality. Although I'm relatively new to using it, I believe I have a basic understanding of its workings. My website involves collecting form data, posting it to a d ...

javascriptphphtmljqueryajax

The attribute 'selectionStart' is not a valid property for the type 'EventTarget'

I'm currently utilizing the selectionStart and selectionEnd properties to determine the beginning and ending points of a text selection. Check out the code here: https://codesandbox.io/s/busy-gareth-mr04o Nevertheless, I am facing difficulties in id ...

javascriptreactjstypescriptmaterial-uiselection-api

Error encountered in jQuery validation: Uncaught TypeError - $(...) ""valid is not a function" is displayed with proper references and order

When I try to call a function, I keep getting an error message that says "Uncaught TypeError: $(...).valid is not a function"... JS $('input[data-val=true]').on('blur', function() { $(this).valid(); }); HTML <div class="col-x ...

javascriptjqueryvalidationmodel-view-controller

Looking for a solution to toggle the visibility of a div based on whether search results are found or not using JavaScript

Running this code <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Searc ...

javascripthtmlcss

Learn how to convert data to lowercase using Vue.js 2

I am attempting to convert some data to lowercase (always lowercase) I am creating a search input like : <template id="search"> <div> <input type="text" v-model="search"> <li v-show="'hello'.includes(sea ...

javascriptvue.jslowercase

While executing a for loop, the variable $.ajax is found to be null in Javascript

When I click on a button with the function btn-book, there is a for loop inside it that fetches data from Ajax. Despite knowing that the data holds values, I constantly receive null. Below is the code snippet for the onclick event: $('#mapContainer&a ...

javascriptajax

issues arise post-transpilation with creating errors

In order to practice, I decided to create a basic TypeScript project. If it could be helpful, here is my ts.config: { "compilerOptions": { "target": "es2016", "module": "commonjs", "outDir": "./dist", "esModuleInterop": true, "forceC ...

javascripttypescriptimport

Class with an undefined function call

Currently, I am working with angular2 and TypeScript where I have defined a class. export class Example{ //.../ const self: all = this; functionToCall(){ //.. Do somerthing } mainFunctionCall(){ somepromise.then(x => self.fu ...

javascriptangularjstypescript

Intermittently play a series of sound files, with only the final sound ringing out

My goal is to create an app that plays a sound based on a number input. I have several short MP3 audio files for different numbers, and I want the app to play these sounds in sequence. However, when I try to do this, only the last sound corresponding to th ...

javascripthtml5-audio

How can one include a URL as a "URL parameter" when using Express?

In my Node.js application, I've set up a router to listen for requests at api/shorten/: router.get('api/shorten/:longUrl', function(req, res, next) { console.log(req.params.longUrl); } When I enter something like: http://l ...

javascriptnode.jsexpressroutesurl-parameters

Does the functionality of Protractor rely on a specific version of AngularJS?

Recently, I began exploring the world of Protractor. One burning question on my mind is its limitations and whether it relies heavily on a specific version of AngularJS. ...

javascriptangularjsprotractor

Error encountered during fresh installation: nullpointerexception

After encountering this error, I decided to do a fresh installation of Eclipse. Despite deleting all the files, it seems like I missed a few. The error message is as follows: java.lang.NullPointerException at testing.testsrc.testcase1(testsrc.java:16) at ...

javaseleniumselenium-webdriverselenium-firefoxdriver

The SSR React application rendering process and asynchronous code execution

When using SSR with React, how is the content that will be sent to the client constructed? Is there a waiting period for async actions to finish? Does it wait for the state of all components in the tree to stabilize in some way? Will it pause for async ...

javascriptreactjsserver-side-rendering

React Component: Issue with toggle functionality in child component not meeting expectations

I'm currently working on a checkbox user interface, where I need to pass a toggle function down to a list component. The issue I'm facing is that while I can check the checkbox successfully, I'm unable to uncheck it for some reason. Below i ...

javascriptreactjs

I am interested in delivering a blended, divided response containing JSON and a string using Express

I am currently in the process of integrating ChatGPT into my Node/Express project and I have a specific requirement. I would like to initially send some metadata in JSON format to the client before streaming the response from ChatGPT as it comes in. Every ...

javascriptnode.jsjsonexpresschunking

How can the distinctions between two bars be illustrated in high charts?

Is there a way to display different values on a new line between two bar charts using Highcharts plugins? I have created a simple bar chart in Highcharts, but I am looking to show the difference between the two bars on a new line. The concept is illustrate ...

javascriptjqueryhtmlsvghighcharts

Modify button behavior on click after the initial press

Struggling to make this work the way I want. I have a button that should execute Javascript function A when clicked, and in function A, I need to change the onclick attribute to function B. This way, on the second tap of the button, it will trigger functio ...

javascripthtmlbutton

Error 199: Protractor tests fail to launch Chromedriver in headless mode

UPDATE: The issue I'm facing is not specific to Jenkins. I encounter the same error when running the tests from the command line. I am trying to execute Protractor tests in Jenkins by specifying a specific Chromedriver that is stored in my project ...

seleniumjenkinsprotractorjenkins-pipeline

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

I am in the process of setting up my development environment and encountering some issues when running gulp in the terminal. I am not sure where this error is originating from. Here is the snippet of code from my Gulpfile.js : var gulp = require(&a ...

javascriptnode.jsgulp