如何从自动补全选项选择科目？DemoQA表单Subject字段XPath查找

DemoQA的科目（Subject）字段是React实现的自动补全组件，不是原生下拉框，需要先输入关键词触发选项列表，再定位并选择目标选项，以下是具体方法：

一、定位选项的XPath写法 #

1. 触发下拉的输入框XPath：//input[@id='subjectsInput']
2. 单个科目标记XPath（以选择Maths为例）：
   • 精准匹配文本：//div[contains(@class,'subjects-auto-complete__option') and text()='Maths']
   • 通用模板（替换{科目名称}即可）：//div[contains(@class,'subjects-auto-complete__option') and text()='{科目名称}']
3. 下拉列表容器XPath（用于等待加载）：//div[contains(@class,'subjects-auto-complete__menu')]

二、Selenium代码示例（Python） #

基础实现（含等待） #

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome()
driver.get("https://demoqa.com/automation-practice-form/")

# 定位输入框并输入关键词触发下拉
subject_input = driver.find_element(By.XPATH, "//input[@id='subjectsInput']")
subject_input.send_keys("Math")

# 显式等待目标选项加载完成，避免硬等待
target_option = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'subjects-auto-complete__option') and text()='Maths']"))
)
target_option.click()

批量选择多个科目 #

如果需要选择多个科目，重复输入+选择逻辑即可：

subjects_to_select = ["Maths", "Physics", "Computer Science"]

for subject in subjects_to_select:
    subject_input.clear()
    subject_input.send_keys(subject[:3]) # 输入前3个字符触发匹配
    target_option = WebDriverWait(driver, 10).until(
        EC.element_to_be_clickable((By.XPATH, f"//div[contains(@class,'subjects-auto-complete__option') and text()='{subject}']"))
    )
    target_option.click()

三、注意事项 #

• 组件的class名称可能存在版本更新，使用contains()匹配class的部分内容，避免因class全名变化导致定位失效
• 优先使用显式等待替代time.sleep()，提升脚本稳定性和执行效率
• 输入关键词时无需输入完整科目名，输入前几个字符即可触发匹配选项

内容的提问来源于stack exchange，提问作者Swastika Narayan