Selenium页面源码与浏览器视图不一致，如何定位动态生成元素？

一、为什么页面源码找不到输入框？ #

这个输入框是JavaScript动态生成的：

• 右键“查看页面源代码”获取的是服务器初始返回的静态HTML，不包含页面加载后JS运行生成的元素。
• 开发者工具显示的是浏览器渲染后的完整DOM树，包含所有JS动态创建的节点，所以能看到输入框。

二、如何定位动态生成的输入框？ #

用Selenium的**显式等待（WebDriverWait）**替代固定延迟的time.sleep，等待元素加载完成并可交互后再操作，这是处理动态元素的可靠方式：

• 优先使用ID、CSS选择器或XPath定位元素，避免依赖易变的类名
• 通过expected_conditions判断元素状态（如是否可见、可点击）

三、优化后的代码示例 #

修正代码逻辑，实现自动输入邮编、选择门店并解析商品详情：

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options
import time
from bs4 import BeautifulSoup

options = Options()
user_agent = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.5845.96 Safari/537.36'
options.add_argument(f'user-agent={user_agent}')
options.binary_location = "H:/programming/chrome-win64/chrome-win64/chrome.exe"
driver_path = "H:/programming/chromedriver-win64/chromedriver-win64/chromedriver.exe"

driver = webdriver.Chrome(options=options)
wait = WebDriverWait(driver, 20)

try:
    driver.get("https://www.woolworths.com.au/shop/catalogue/view#view=list&saleId=51690&areaName=NSW")
    
    # 等待输入框加载完成并可交互
    postcode_input = wait.until(
        EC.element_to_be_clickable((By.ID, 'wx-digital-catalogue-autocomplete'))
    )
    postcode_input.send_keys('2750, Woolworths Emu Plains')
    
    # 等待下拉选项出现并点击第一个结果
    first_option = wait.until(
        EC.element_to_be_clickable((By.ID, 'wx-digital-catalogue-autocomplete_option--0'))
    )
    first_option.click()
    
    # 等待页面刷新完成后获取源码（可替换为等待商品元素加载的显式等待）
    time.sleep(3)
    page_source = driver.page_source
    soup = BeautifulSoup(page_source, 'lxml')
    
    # 解析商品详情示例
    products = soup.find_all('div', class_='shelfProductTile-content')
    for idx, product in enumerate(products, 1):
        name = product.find('h3', class_='shelfProductTile-description').text.strip()
        price = product.find('span', class_='price').text.strip()
        print(f"商品{idx}: {name} | 价格: {price}")
        
finally:
    # 确保浏览器进程正常关闭
    driver.quit()

关键优化说明 #

• 用try...finally块保证浏览器无论是否出错都能关闭，避免残留进程
• 用显式等待替代部分time.sleep，提升代码稳定性和执行效率
• 添加了商品名称、价格的解析示例，可根据需求扩展更多字段

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