下拉列表选择使用 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()

Answer 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();
    }
}

Answer 2

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.