Selenium WebDriver点击自动建议项后UI未显示对应值求助

针对Angular ng-bootstrap的Typeahead组件，手动选择自动建议项后目标区域正常显示内容，但Selenium模拟点击/键盘操作后无内容的问题，提供以下几种解决方案：

1. 模拟完整的用户鼠标操作（推荐优先尝试） #

ng-bootstrap组件可能依赖鼠标悬停等前置事件触发状态变更，单纯的click可能无法触发完整的组件逻辑：

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

# 等待自动建议项完全可见
wait = WebDriverWait(driver, 10)
suggestion_item = wait.until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, "typeahead-container .list-group-item.active"))
)

# 模拟鼠标移动到元素、短暂悬停、点击的完整流程
actions = ActionChains(driver)
actions.move_to_element(suggestion_item)\
       .pause(0.5)\
       .click()\
       .perform()

2. 通过JavaScript触发组件的原生事件或API #

Selenium的原生点击可能未触发Angular的变更检测，直接用JS触发组件事件或调用其API：

wait = WebDriverWait(driver, 10)
suggestion_item = wait.until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, "typeahead-container .list-group-item.active"))
)

# 方法A：触发带冒泡的click事件
driver.execute_script("""
    const event = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    arguments[0].dispatchEvent(event);
""", suggestion_item)

# 方法B：直接调用Typeahead组件的selectItem方法（需页面未禁用Angular调试模式）
driver.execute_script("""
    const inputEl = document.getElementById('typeahead-basic');
    if (!inputEl) return;
    const typeaheadInstance = ng.getComponent(inputEl);
    if (typeaheadInstance?.selectItem) {
        const contactName = arguments[0].querySelector('.contact-name').textContent.trim();
        const targetItem = typeaheadInstance.items.find(item => item.ContactName === contactName);
        if (targetItem) typeaheadInstance.selectItem(targetItem);
    }
""", suggestion_item)

3. 等待异步加载完成 #

点击建议项后可能存在AJAX请求加载数据，需等待目标区域出现内容：

# 点击建议项
suggestion_item.click()

# 等待目标区域（card-body）出现子元素
wait.until(
    EC.presence_of_element_located((By.CSS_SELECTOR, ".card-body *"))
)

# 验证内容
target_content = driver.find_element(By.CSS_SELECTOR, ".card-body").text
print("加载的内容：", target_content)

4. 调整键盘操作逻辑 #

如果使用键盘导航，尝试组合Down+Tab而非仅Enter，部分组件在失焦时才会触发内容加载：

from selenium.webdriver.common.keys import Keys

search_input = driver.find_element(By.ID, "typeahead-basic")
# 输入搜索词后，按Down选中目标项
search_input.send_keys(Keys.DOWN)
# 按Tab触发失焦，触发组件的选择逻辑
search_input.send_keys(Keys.TAB)

# 等待内容加载
wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, ".card-body *")))

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