Using Javascript with Selenium to choose an item from a dropdown menu

Question

Using Javascript with Selenium to choose an item from a dropdown menu

I'm having trouble selecting an element from a dropdown list and interacting with it.

The xpath for the element I'm trying to select from the dropdown is:

/html/body/div[1]/div/div[1]/div[1]/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[2]/div/div/ul/li[2]

The dropdown window has the id rw_2_input

The dropdown list offers five options: less than 18, 18-40, 40-60, and so on. Here's what I've tried:

// Select the dropdown and click on it
const age = await driver.findElement(By.id('rw_2_input'))
await age.click()

Then,

// Select the dropdown item and click on it

    const ageChoice = driver.wait(until(elementIsVisible((By.XPATH, "/html/body/div[1]/div/div[1]/div[1]/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[2]/div/div/ul/li[2]"))))
    await ageChoice.click()

At the top of the file, I have imported these modules:

const { Builder, By, Key, util } = require('selenium-webdriver')
const chrome = require('selenium-webdriver/chrome')
const expect = require('expect')
const { elementIsVisible } = require('selenium-webdriver/lib/until')

The issue I'm facing is that it says until is not defined.

I believe there's an error in my importing process, but I am unsure of where the mistake lies. I referred to this documentation to understand the correct way to import, but I couldn't find a solution. If I try to select the element in the dropdown using

const ageChoice = await driver.findElement(By.xpath('/html/body/div[1]/div/div[1]/div[1]/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[2]/div/div/ul/li[2]'))
await ageChoice.click()

It returns an error stating:

ElementNotInteractableError: element not interactable

Why is it not interactable? I am confused.

* * *

***** UPDATE: *****

I managed to make some progress, but I still encounter the "Element not interactable" error: What I did was

const ageChoice = await driver.findElement(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))
await ageChoice.click()

If I comment out the .click() function everything works fine, but the option is not selected. How can I select it despite being told that it is not interactable?

javascript selenium selenium-webdriver selenium-chromedriver

Answer 1

Answer №1

Here's a possible workaround that might help in the short term. (It's not a permanent solution). You have the ability to run JavaScript directly on the web page by using this command driver.executeScript(command).

To target a specific element by its ID and trigger JavaScript, you can use the following as an example:

driver.executeScript('document.getElementById('#someID').click()')

Answer 2

Here's a possible workaround that might help in the short term. (It's not a permanent solution). You have the ability to run JavaScript directly on the web page by using this command driver.executeScript(command).

To target a specific element by its ID and trigger JavaScript, you can use the following as an example:

driver.executeScript('document.getElementById('#someID').click()')

Answer 3

Answer №2

After much trial and error, I have finally identified the root cause of the issue and am documenting it here for future reference.

It turns out that the presence of 2 dropdown lists on my webpage was causing a problem. When I selected an option from the first dropdown, the options momentarily overlapped with the second dropdown, leading to a "not interactable error".

Upon discovering this issue (which unfortunately took hours as it is not mentioned in any documentation), I found a way to effectively "wait" for the first dropdown to close.

The solution involves performing two specific checks:

a) Ensure that the element is visible.

b) Confirm that it is enabled.

Without these checks, the code will not perform as expected. Here is the revised code snippet:

const ageChoice = await driver.findElement(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))
await driver.wait(until.elementIsVisible(ageChoice), 3000)
await driver.wait(until.elementIsEnabled(ageChoice), 3000)
await ageChoice.click()

By incorporating the elementIsVisible and elementIsEnabled functions within the wait-until method, there is no need for elementLocated. This alternative code snippet should be avoided:

const ageChoice = await driver.wait(until.elementLocated(By.xpath(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))

If you encounter a situation where these two checks are unnecessary but the element is located at the bottom of a page with multiple dropdowns, resulting in timing out before being accessed, then use the following approach:

const ageChoice = await driver.wait(until.elementLocated(By.xpath(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))
ageChoice.click()

Answer 4

After much trial and error, I have finally identified the root cause of the issue and am documenting it here for future reference.

It turns out that the presence of 2 dropdown lists on my webpage was causing a problem. When I selected an option from the first dropdown, the options momentarily overlapped with the second dropdown, leading to a "not interactable error".

Upon discovering this issue (which unfortunately took hours as it is not mentioned in any documentation), I found a way to effectively "wait" for the first dropdown to close.

The solution involves performing two specific checks:

a) Ensure that the element is visible.

b) Confirm that it is enabled.

Without these checks, the code will not perform as expected. Here is the revised code snippet:

const ageChoice = await driver.findElement(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))
await driver.wait(until.elementIsVisible(ageChoice), 3000)
await driver.wait(until.elementIsEnabled(ageChoice), 3000)
await ageChoice.click()

By incorporating the elementIsVisible and elementIsEnabled functions within the wait-until method, there is no need for elementLocated. This alternative code snippet should be avoided:

const ageChoice = await driver.wait(until.elementLocated(By.xpath(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))

If you encounter a situation where these two checks are unnecessary but the element is located at the bottom of a page with multiple dropdowns, resulting in timing out before being accessed, then use the following approach:

const ageChoice = await driver.wait(until.elementLocated(By.xpath(By.xpath("//li[contains(text(),'Tra 19 e 40')]"))
ageChoice.click()

Using Javascript with Selenium to choose an item from a dropdown menu

Answer №1

Answer №2

Similar questions

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

Struggling to animate the selector of a nested div in Jquery?

Create a dynamic table using an array in jQuery

The functionality of Vue is acting up with the HTML, unexpectedly refreshing when a button is clicked

Can you provide guidance on integrating this jQuery script into my Next.Js application effectively?

Unpredictable Redirection when URL is Clicked using PHP or Javascript

What could be causing the absence of the ID definition?

Does the html label prevent propagation from occurring?

Tips for setting up Highcharts tooltip.headerFormat using the function getDate() plus 5

Coordinating Angular to communicate with Node.js to send and receive data

Use Node.js to transform every spreadsheet into Json format

Minimize the number of HTTP requests by including CSS and JS files in PHP

Navigating through the Robot Framework: Extracting specific data from a cell in an xlsx document

"Converting domain names with punycode and utilizing Firebase for a

Tips on implementing Dynamic arrays in the useEffect hook within React applications

Exploring the process of acquiring a button using refs in external JavaScript

Monitor the user's attendance by utilizing two separate for loops

What causes setInterval to create an endless loop when used inside a while loop in JavaScript?

"Utilizing the power of mapping in React to dynamically generate and return an

Enhancing JavaScript form validation techniques