下拉列表選擇使用 Selenium Python

Question

我正在嘗試 select “曼哈頓”、“溫莎廣場”和“華爾街”。 分別來自本網站的“城市”、“社區”和“收藏”下拉搜索框： https://upxland.me/properties/ 。 相同的代碼（我選擇的文本除外）適用於“城市”下拉菜單，但不適用於“鄰里”和“收藏”。 我哪里做錯了，像這樣的 select 下拉搜索框的正確方法是什么？

我也無法通過復制它的 XPATH 找到“下載”按鈕。

錯誤消息都是 ElementClickInterceptedException 如下所示：

“raise exception_class(message, screen, stacktrace) selenium.common.exceptions.ElementClickInterceptedException: 消息：元素點擊被截獲：元素...在點 (476, 234) 不可點擊。其他元素將收到點擊：... (會話信息：chrome=103.0.5060.134)”

我的代碼如下所示。 有人能幫忙嗎？

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

此應用程序的下拉菜單中的選項是動態加載的。
這意味着，默認情況下它們不會加載到 DOM 中。

因此，為了單擊該選項，它必須之前存在於 DOM 中。 為此，您可以在 ddm 的輸入元素中鍵入選項。

對於每個下拉菜單，您可能需要 3 個元素

• 下拉菜單 xpath --> //label[text()='Neighborhood']//parent::div
• 輸入元素 xpath --> //label[text()='Neighborhood']//following-sibling::div/input
• 選項 xpath --> // [text()='%s']//ancestor:: [@role='option']

*注意 xpath 已參數化，以使代碼對任何選項都靈活

這是一個代碼片段（在 java 中），目前正在為在“Neighborhood”ddm 中選擇“WESTWOOD PARK”而工作

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

如果你按F12查看，Neighborhood的下拉菜單和city不一樣，它可以支持多選，更重要的是，下拉列表是動態加載的，你需要先滾動加載所有項目，然后select它。