Choose an option from a dropdown menu using JavaScript

Question

Choose an option from a dropdown menu using JavaScript

Currently, I am working on a project that involves using javascrypt in conjunction with selenium. While attempting to search for and select an item from a list, I have encountered difficulties in selecting the element even after successfully locating it. If anyone can provide guidance or assistance on how to resolve this issue, I would greatly appreciate it. Thank you.

var input = document.evaluate("//li[contains(., 'ATACAMA')]", document, null, XPathResult.ANY_TYPE, null );

var thisregion = input.iterateNext();
thisregion.click();

https://i.stack.imgur.com/zICuo.png

javascript selenium selenium-chromedriver

Answer 1

Answer №1

Consider utilizing the code snippet provided:

var selection = document.evaluate("//li[text()='ATACAMA']", document, null, XPathResult.ANY_TYPE, null );

var chosenOption = selection.iterateNext();
chosenOption.click();

Answer 2

Consider utilizing the code snippet provided:

var selection = document.evaluate("//li[text()='ATACAMA']", document, null, XPathResult.ANY_TYPE, null );

var chosenOption = selection.iterateNext();
chosenOption.click();

Answer 3

Answer №2

Although I'm not familiar with Xpath, as you mentioned, there's no restriction in using querySelector or querySelectorAll.

In this code snippet, an array of all li elements is created and the element containing the text "Item 3" is retrieved using .find. Subsequently, the element is programmatically clicked. Each li element has an inline onClick event defined in the HTML.

Do you think this approach would suit your needs?

let li_item = Array.from(document.querySelectorAll('li'))
              .find(x => x.textContent === 'Item 3');

li_item.click();

function select(element, n) {
  element.style.color = "red";
  console.log(`${n} has been selected!`);
}

<ul>
  <li onClick = "select(this, 1)">Item 1</li>
  <li onClick = "select(this, 2)">Item 2</li>
  <li onClick = "select(this, 3)">Item 3</li>
  <li onClick = "select(this, 4)">Item 4</li>
  <li onClick = "select(this, 5)">Item 5</li>
</ul>

Answer 4

Although I'm not familiar with Xpath, as you mentioned, there's no restriction in using querySelector or querySelectorAll.

In this code snippet, an array of all li elements is created and the element containing the text "Item 3" is retrieved using .find. Subsequently, the element is programmatically clicked. Each li element has an inline onClick event defined in the HTML.

Do you think this approach would suit your needs?

let li_item = Array.from(document.querySelectorAll('li'))
              .find(x => x.textContent === 'Item 3');

li_item.click();

function select(element, n) {
  element.style.color = "red";
  console.log(`${n} has been selected!`);
}

<ul>
  <li onClick = "select(this, 1)">Item 1</li>
  <li onClick = "select(this, 2)">Item 2</li>
  <li onClick = "select(this, 3)">Item 3</li>
  <li onClick = "select(this, 4)">Item 4</li>
  <li onClick = "select(this, 5)">Item 5</li>
</ul>

Choose an option from a dropdown menu using JavaScript

Answer №1

Answer №2

Similar questions

Invoking a JavaScript function using jQuery's AJAX

A guide on incorporating Google authentication into Vue.js with the use of TypeScript and the component-based syntax

The functionality for dragging elements is not functioning properly in JavaScript

Organize angularjs ngRepeat with updated data outcomes

Utilizing JavaScript within my WordPress site

Tips for displaying a digital keyboard when a webpage loads on iOS Safari

Activate a tooltip on the button depending on the value entered in the search field

How can I style the empty text in an ExtJS grid using CSS?

Steps for displaying a deeply nested array and string within an object that is nested further in an array

I am experiencing excessive paper skipping in my printer

"Automate the process of adding items to the shopping cart

"The modules Nosetest and unittest.expectedFailures offer ways to handle test

Angular 2 partial static routing parameters with customizable features

Troubleshooting bitrate and quality issues in AWS MediaConvert

How can I handle the slow finishing time of driver.get()? Is there a way to set a timeout method for it?

Vue.js encounters a null value for "$slots.default()[0].el" when dynamically passing a slot using v-for

Ways to create a fixed top navigation bar that adjusts content similarly to a non-fixed navbar

What is the best way to configure Jenkins to update a specific URL across multiple Python test scripts, allowing me to manage all scripts in a single repository?

Using percentages to position Div elements

What is preventing the JQuery dialog from opening?