Selenium选中商品选项正常，添加购物车却始终加入首个选项求助

你遇到的核心问题是：视觉上选中了目标尺寸（32kg），但网站底层表单逻辑并未识别到这个选择，导致点击加入购物车时默认提交了第一个SKU（8kg）。这是因为很多电商网站的尺寸选择控件是视觉层（span元素）和实际表单控件（radio/checkbox）分离的，单纯点击span可能只触发了UI变化，没有真正激活对应的表单选项。

以下是针对性的修复步骤：

1. 定位真实的表单控件（Radio按钮） #

查看页面源码会发现，每个尺寸选项对应一个隐藏的<input type="radio">控件，点击span只是触发这个radio的选中状态，但Selenium的点击可能没有正确关联。直接定位并选中对应的radio：

# 替换原来的span点击代码，直接选中32kg对应的radio容器（label）
target_radio = WebDriverWait(driver, 30).until(
    EC.presence_of_element_located((By.XPATH, "//input[@value='32 kg']/parent::label"))
)
target_radio.click()

如果radio本身不可见，可通过JS强制选中并触发变化事件：

target_radio = WebDriverWait(driver, 30).until(
    EC.presence_of_element_located((By.XPATH, "//input[@value='32 kg']"))
)
driver.execute_script("arguments[0].checked = true;", target_radio)
# 手动触发change事件，让网站识别选择变化
driver.execute_script("arguments[0].dispatchEvent(new Event('change'));", target_radio)

2. 用click()替代submit()触发加入购物车 #

submit()是提交整个表单的原生方法，会优先取表单默认值（第一个选项），而电商网站的加入购物车按钮通常绑定了自定义JS逻辑，用来获取当前选中的SKU。替换最后一行代码：

# 等待按钮可点击后执行点击
add_cart_btn = WebDriverWait(driver, 30).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, 'button.btn.btn-primary.add-to-cart.js-add-to-cart-button'))
)
add_cart_btn.click()

3. 等待选中状态确认（可选但推荐） #

在点击加入购物车前，等待页面显示当前选中的尺寸是32kg，确保选择已被网站识别：

# 等待页面显示选中的尺寸为32kg
WebDriverWait(driver, 10).until(
    EC.text_to_be_present_in_element((By.CSS_SELECTOR, ".variant-option.selected"), "32 kg")
)

优化后的完整代码 #

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

def element_present_click1(path_type, selector):
    element = WebDriverWait(driver, 30).until(EC.element_to_be_clickable((path_type, selector)))
    try:
        element.click()
    except:
        driver.execute_script("arguments[0].click();", element)

path = r"C:\Program Files (x86)\msedgedriver.exe"
driver = webdriver.Edge(path)
driver.get('https://www.power-systems.com/shop/product/proelite-competition-kettlebell')

# 关闭弹窗
element_present_click1(By.CSS_SELECTOR, 'button[name="bluecoreCloseButton"]')
element_present_click1(By.CSS_SELECTOR, 'a[id="hs-eu-decline-button"]')

# 选中32kg对应的radio控件并触发事件
target_radio = WebDriverWait(driver, 30).until(
    EC.presence_of_element_located((By.XPATH, "//input[@value='32 kg']"))
)
driver.execute_script("arguments[0].checked = true;", target_radio)
driver.execute_script("arguments[0].dispatchEvent(new Event('change'));", target_radio)

# 确认选中状态
WebDriverWait(driver, 10).until(
    EC.text_to_be_present_in_element((By.CSS_SELECTOR, ".variant-option.selected"), "32 kg")
)

# 点击加入购物车
add_cart_btn = WebDriverWait(driver, 30).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, 'button.btn.btn-primary.add-to-cart.js-add-to-cart-button'))
)
add_cart_btn.click()

• 电商网站控件多为视觉层与逻辑层分离，不要只看表面可点击元素，要找到真正绑定数据的表单控件。
• 现代电商网站依赖JS处理购物车逻辑，必须用click()触发按钮的绑定事件，而非原生表单提交的submit()。
• 触发change事件很重要，很多网站依赖这个事件更新当前选中的SKU信息。

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