Drop-down list selection using Selenium Python

Question

I'm trying to select "Manhattan", "WINDSOR SQUARE", and "Wall St." from the "city", "Neighborhood", and "Collections" dropdown search boxes respectively on this website: https://upxland.me/properties/. The same code (except the text I'm selecting) works for the "City" dropdown but not "Neighborhood", and "Collections". Where am I doing wrong and what is the correct way to select dropdown search boxes like this?

I'm also not able to locate the "download" button by copying the XPATH of it.

The error messages are all ElementClickInterceptedException shown below:

"raise exception_class(message, screen, stacktrace) selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element ... is not clickable at point (476, 234). Other element would receive the click: ... (Session info: chrome=103.0.5060.134)"

My code is shown below. Could anyone help?

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.ui import Select
import time

PATH = "/usr/local/bin/chromedriver"
driver = webdriver.Chrome(PATH)
driver.get("https://upxland.me/properties/")

'''City'''
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[contains(text(),'City')]"))).click()

city = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(text(),'Manhattan')]")))
city.click()

'''Neighborhood'''
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[contains(text(),'Neighborhood')]"))).click()

neighborhood = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(text(),'WINDSOR SQUARE')]")))
neighborhood.click()

'''Collection'''
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[contains(text(),'Collections')]"))).click()

neighborhood = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(text(),'Wall St.')]")))
neighborhood.click()

'''download'''
download_button_path = '//*[@id="HackerLovesUPXLand"]/div[1]/main/div/div/div/div[5]/div/div[1]/div/div[4]/button/span/i'
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, download_button_path))).click()

Well, did you try to check what happens when the code runs? For example, after choosing a City, does the web page actually have an element matching the XPath //label[contains(text(),'Neighborhood')]? Do you see it get clicked? Is there similarly an element matching "//div[contains(text(),'WINDSOR SQUARE')]" in the drop-down list? How did you determine that the code works for the City? When you investigate in the same way for the other drop-downs, what seems to go wrong? — Karl Knechtel
– Karl Knechtel, Commented Jul 27, 2022 at 1:51

Tork · Accepted Answer · 2022-07-27 09:43:50Z

1

The options in the dropdown menus for this app are loaded dinamically.
it means, they are not loaded by default in DOM.

So, in order to click the option, it must be present in DOM before. To achieve that, you can type the option inside the ddm's input element.

For each dropdown menu you may need 3 elements

Dropdown menu xpath --> //label[text()='Neighborhood']//parent::div
Input element xpath --> //label[text()='Neighborhood']//following-sibling::div/input
Option xpath --> //[text()='%s']//ancestor::[@role='option']

*notice the xpath are parametrized in order to make the code flexible for any option

Here is a code snippet (in java tho) that is currently working for selecting 'WESTWOOD PARK' in 'Neighborhood' ddm

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Launcher {

    private static final String DDM_NEIGHB_XPATH = "//label[text()='Neighborhood']//parent::div";
    private static final String INPUT_NEIGH_XPATH = "//label[text()='Neighborhood']//following-sibling::div/input";
    private static final String OPTION_GENERIC_XPATH = "//*[text()='%s']//ancestor::*[@role='option']";
    private static WebDriver driver;

    public static void main(String[] args) {

        //initialize driver
        initDriver();

        //go to url
        driver.get("https://upxland.me/properties");

        //select Neighborhood
        selectNeighborhood("WESTWOOD PARK");

    }



    //actions
    public static void selectNeighborhood(String option) {
        
        //wait until the page loads and the ddm is visible
        WebDriverWait wait = new WebDriverWait(driver, 10);
        wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(DDM_NEIGHB_XPATH)));

        //click in ddm
        getNeightDDM().click();

        //input option
        getNeightInput().sendKeys(option);
        
        //click option
        getNeightOption(option).click();
        
        //clear-up input
        getNeightInput().clear();

    }


    //webelements
    public static WebElement getNeightDDM() {
        return driver.findElement(By.xpath(DDM_NEIGHB_XPATH));
    }

    public static WebElement getNeightInput() {
        return driver.findElement(By.xpath(INPUT_NEIGH_XPATH));
    }

    public static WebElement getNeightOption(String option) {
        return driver.findElement(By.xpath(String.format(OPTION_GENERIC_XPATH, option)));
    }

    //setup
    private static void initDriver() {
        System.setProperty("webdriver.chrome.driver", "c:/utils/selenium/drivers/chromedriver.exe");
        driver = new ChromeDriver();
    }
}

answered Jul 27, 2022 at 9:43

Tork

4964 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chloe Over a year ago

Thanks, it worked! I wonder if is it better to use :: in XPATH like "//*[text()='%s']//ancestor::*[@role='option']" than "//div[contains(text(),'HERALD SQUARE')]"?

Tork Over a year ago

@Chloe I'm glad it worked! :) Yes xpaths like those are known as Xpath Axes, they allow you to locate elements related to others, so are very usefull for these cases. source: w3schools.com/xml/xpath_axes.asp

rsc05 Over a year ago

@Chloe could you put your python answer please!

justin · Accepted Answer · 2022-07-27 02:19:38Z

0

if you Press F12 to check, the dropdown of Neighborhood is not same as city, it can support mulitple selection, and more importantly is that, the dropdown list is dynamic loaded, you need first scroll to load all items,then select it.

answered Jul 27, 2022 at 2:19

justin

1976 bronze badges

Collectives™ on Stack Overflow

Drop-down list selection using Selenium Python

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related