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

What is the best way to retrieve data from the next page in a Protractor test?

I am currently in the process of automating the test for booking a flight. When I enter the credentials on the homepage, click the Submit button, and the browser navigates to the search results page. const EC = protractor.ExpectedConditions; describe( ...

javascriptnode.jsprotractorui-automation

What is the best way to delay until text is visible within an element?

Could I potentially delay action until the appearance of an element, as indicated by the text within the STRONG section below? The content in question consistently changes based on specific triggers. <div class="alert message alert-success alert-da ...

pythonselenium-webdriver

How to exclude the port number from the href in a Node.js EJS template?

I have the following code snippet. I am trying to list out the file names in a specific directory and add an href tag to them. The code seems to be working fine, however, it still includes the port number where my node.js app is running. How can I remove ...

javascriptnode.jsejs

Modifying button appearance upon clicking using JavaScript

JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...

javascripthtmlcssangularjs

Unable to retrieve DateTime.Now as a string within a Razor view

I am trying to retrieve the current time in a Razor View and utilize it in JavaScript, as demonstrated below: @{ string fileName = "Score_List_" + DateTime.Now.ToShortDateString(); } <script> // assigning C# variable to JavaScript variabl ...

javascriptc#jqueryasp.net-mvcrazor

Using a promise instead of resolving it with Angular's $q.then() methodology

Imagine you come across the given code snippet: var callNo1 = $http(...).then(function (response1) { var callNo2 = $http(...).then(function (response2) { return [response1.data, response2.data]; }); return callNo2; }).then(function (r ...

javascriptangularjs

prevent unauthorized changes to input using browser developer tools in Angular

We have a login page for our application with three fields: "user name," "password," and a "login" button. Here's the issue I'm facing: I enter a valid user name. Then, I open the Browser Developer Tools and input the following code: d ...

javascriptangular

Issue with dynamic creation of menu in React Material UI where onClose function is unable to reference a variable inside the function

As I develop an app, I have chosen to dynamically construct the settings menu based on a JSON file. { categories: [ { name: "General", index: 1, items: [{ name: "Dark Mode", index: 1 ...

javascriptreactjsmaterial-ui

Update the iframe URL to direct the user to a new tab instead of opening a popup

I have created the following script, but I am facing a challenge as I realize that the URL I want to use opens in a new tab instead of just forwarding: <script> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.sp ...

javascriptjqueryiframepopupclick

I have successfully converted an SQL Join query into JSON, but now I am unsure of how to interact with the

I recently ran an SQL Join on two tables and obtained the following results: _____People_____ name: "Jane" age: 35 job_id: 1 _____Professions_____ job_id: 1 title: "Teacher" "SELECT * FROM People INNER JOIN Professions ON People.job_id = Professions.job ...

javascriptc#sqljsonjoin

The component is unable to access VueJS references

Below is a simplified version of the code I am working with: <html> <head> <script src="file:///D:/OtherWork/javascript/vue/vue.js"></script> </head> <body> <div id="app"> & ...

javascriptvue.js

What are the steps to restrict the scope of a <style> declaration in HTML?

Currently, I am in the process of creating a user interface for a webmail. Whenever I receive an email, I extract its content and place it within a <div> element for display purposes. However, one challenge that I am facing is that each email contain ...

javascripthtmlcssstylesheet

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

In the process of creating a dynamic form, the number of textboxes is determined by the situation at hand. Each textbox is assigned an arithmetic formula, which is obtained from a database table. The structure of my form will be as follows: <div ng-ap ...

javascriptjqueryangularjs

resolved after a new promise returned nothing (console.log will output undefined)

Here is my Promise Function that iterates through each blob in Azure BlobStorage and reads each blob. The console.log(download) displays the values as JSON. However, when trying to close the new Promise function, I want the resolve function to return the ...

javascriptangulartypescript

Are your JavaScript scripts causing conflicts?

My bootstrap Carousel was working perfectly fine until I added a script to modify the navigation bars. The original script for the Carousel looked like this: <script> !function ($) { $(function() { $('#myCar ...

javascriptjquerytwitter-bootstrap

Is it necessary to alter the number of rows or columns in the table?

I'm having an issue with my code where the table is not changing the number of rows based on the selected input option. It seems to only read the first value of the select id and does not update the rows accordingly. Can someone help me identify the m ...

javascriptcsshtml-table

Create a dynamic slideshow using a bootstrap carousel in conjunction with the powerful php glob() function

I'm struggling to create a homepage featuring a slider that pulls images dynamically from a subfolder within the Wordpress uploads directory. Here's my code: <div id="" class="carousel slide" data-ride="carousel"> <!-- Wrapper for sl ...

javascriptphpjquerywordpresstwitter-bootstrap

Tips for verifying a myriad of checkboxes-

Within my application, there are a total of 24 checkboxes. Is it necessary for me to locate all the page objects associated with these 24 checkboxes? UPDATE Here is the corresponding HTML code: <td>Gender</td> <td class="text-center"& ...

checkboxselenium-webdrivercheckboxlistpageobjects

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...

javascripthtmlcss

Catch the return of the transition event

My website is built on asp net core, with all pages displayed as partialviews to create a spa model without relying on angular or other frameworks. By switching partialviews, I can easily modify the page's url using window.history.pushState ("objec ...

javascriptajaxasp.net-core