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

Put the code inside a function. I'm new to this

What options do I have for personalizing this Google Bar Graph?

When using AngularJS, encountered an issue where a view was not updating with new data from a $http request

What are the possible complications that could arise from implementing this system for designing web pages?

Issue occurred in module.js:341 while attempting to include android platform to ionic using command line

Is there a way to eliminate the need for using Xpath?

Experimenting with kendoGrid information through cucumber capybara

Stop HTML <dialog> from automatically closing using Vue

Having trouble with my Angular subscription - not behaving as I anticipated

What causes the discrepancy in results between the quoted printable encoding operation in JavaScript and Oracle?

Unrecognized files located within the same directory

Initiate a POST request to download the file upon clicking the button

Jest throws an error: require function is not defined

Attempting to utilize Selenium code in order to continuously refresh a webpage until a button becomes clickable

Guide on extracting an Array from JSON in a $.ajax response

Preventing page refresh with Javascript when clicking on CAPTCHA

Acquire the website link using Selenium in the Python programming language

Establishing a global variable in Cypress through a function

Error: Uncaught TypeError - Unable to access the 'handleClick' property of undefined within a forEach loop

Displaying a pair of values using a single noUISlider