Don Diego
Don Diego

Reputation: 1488

Selenium in Javascript, select element from dropdown list

I'm trying to get an element from a dropdown list, to select it and go over, but I can't.

I know that the xpath of the element i want 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]

while the dropdown window has id rw_2_input

the dropdown list lets you to select one of five options: less than 18, 18-40, 40-60, and so on; so I did:

// 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 then 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()

on top of the file, i used those imports:

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')

My issue is that it says until is not defined.

I'm sure I'm doing something wrong in importing, but I don't know what. I searched here to understand what and how to import, but i had no clue. 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 says

ElementNotInteractableError: element not interactable

Why it should not be interactable?? I don't get it.

* * *

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

I managed to work something, but still says "Element not interactable": what I did is

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; however I don't have the option selected. How can I select it since it says that it is not interactable?

Upvotes: 0

Views: 2672

Answers (2)

Don Diego
Don Diego

Reputation: 1488

I finally managed what is the problem. I'll post here for future reference.

Well, I got that I have 2 dropdown list in my page, and when I select an option from the first one, options temporarily "covers" the second dropdown, Which causes a "not interactable error".

After discovering this (and it took hours, since no one in documentations says nothing about that), I managed how to "wait" for the first dropdown to close.

Basically, you have to do both two checks:

a) That the element is visible.

b) That it is enabled.

No checks, no party, so the code becomes:

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()

This way it finally works.

Note that if you use wait-until elementIsVisible and elementIsEnabled you dont't need to wait-until elementLocated: you DO NOT NEED to use this code

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

Instead, this code must be used when you dont do these 2 checks, but the element is at the bottom of a page that contains a lot of dropdowns and it goes in timeout before it is reached. In this case, use

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

Upvotes: 0

koder613
koder613

Reputation: 1586

This could be a quick fix. (Not a solution). You can execute JavaScript on the webpage with this command driver.executeScript(command).

Select the element by ID, or otherwise, that you would like to click and execute JavaScript for example:

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

Upvotes: 1

Related Questions