Python Selenium切换容器标签页后表单提交按钮失效问题

问题现象 #

操作目标站点的平均费率查询表单时，停留在默认的LBJ express标签页，填写字段后提交可以正常运行；切换到NTE/NTETEXPRESS标签页后提交，会触发超时或Element is not interactable（元素不可交互）报错。
原有实现代码如下：

依赖导入部分 #

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.chrome.options import Options
from selenium.common import exceptions as sel_excpt
from webdriver_manager.chrome import ChromeDriverManager

options = Options()
options.add_argument("disable-popup-blocking")
options.add_experimental_option("detach",True)
chrome_driver_pth = ChromeDriverManager().install()
service = ChromeService(executable_path=chrome_driver_pth)

driver = webdriver.Chrome(service=service, options=options)

业务逻辑部分 #

other_tab = False

url = r"https://www.texpresslanes.com/pricing/average-rates/"
segment_css = "#details-1-toll"
day = "#details-1-day"
time = "#details-1-time"
submit = "#wpcf7-f9-p10-o1 > form > div.form-row.last-row.grid-2 > div > div > input.wpcf7-form-control.wpcf7-submit.button-secondary"

if other_tab:
    net_tab= "#content > div.page-layout > div > div > article > div > div > div > div > section.module.module-traffic.module-pyt-tabs.full-width.simple-tabs.inserted > div > div > div.module-tabs > button.tab2"
    
    WebDriverWait(driver, 15).until(
            EC.visibility_of_element_located((By.CSS_SELECTOR, net_tab))
        )
    WebDriverWait(driver, 15).until(
            EC.element_to_be_clickable((By.CSS_SELECTOR, net_tab))
        ).click()

WebDriverWait(driver, 10).until(
            EC.visibility_of_element_located((By.CSS_SELECTOR, segment_css)))
select_seg = Select(WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, segment_css))))

if not other_tab:
      select_seg.select_by_value("277")
else: 
      select_seg.select_by_value("283")
 
days = driver.find_element(By.CSS_SELECTOR, day_css)
time = driver.find_element(By.CSS_SELECTOR, time_css)

Select(days).select_by_value("monday")
Select(time).select_by_value("00:00:00")
# 当other_tab = True时此处执行失败
submit_bttn = driver.find_element(By.CSS_SELECTOR, submit)
submit_bttn.click()        

已尝试的无效方案 #

• 增加显式等待时长，等待提交按钮变为可点击状态
• 执行JS脚本点击按钮，代码如下，该方式仅在other_tab = False时生效

driver.execute("arguments[0].click();",submit_bttn) 

• 直接在Chrome开发者控制台填写字段后执行原生JS点击代码，该操作同样仅在LBJ express首个标签页下生效，NTE35W标签页下点击无响应

document.querySelector("#wpcf7-f9-p10-o1 > form > div.form-row.last-row.grid-2 > div > div > input.wpcf7-form-control.wpcf7-submit.button-secondary").click()

根因分析 #

该站点的标签切换是页面内组件实现，不是浏览器级标签页。两个标签下各有一套独立的表单，DOM中同时存在两套结构，且表单内元素ID重复、提交按钮选择器特征重合。
原有代码全局查找元素时，永远会匹配DOM树中靠前的、默认LBJ标签下的表单元素。切换到NTE标签后，LBJ标签对应的表单被设置为隐藏状态，隐藏状态的元素无法交互，这就是报错的核心原因。控制台执行JS点击无效也是同样的逻辑，选择器匹配到的是隐藏的第一个提交按钮。

可行解决方案 #

所有表单元素的查找范围限定在当前可见的激活标签面板内，不要全局搜索元素，避免匹配到隐藏的表单控件。
修正后的核心实现代码：

# 补充缺失的导入
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.support.ui import Select

other_tab = True
driver.get(url)

# 标签按钮定位
nte_tab_css = "button.tab2"

if other_tab:
    # 点击切换到NTE标签
    WebDriverWait(driver,15).until(EC.element_to_be_clickable((By.CSS_SELECTOR, nte_tab_css))).click()

# 定位当前显示的激活内容面板
active_panel = WebDriverWait(driver,10).until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, ".tab-content[style*='display: block']"))
)

# 所有表单元素仅在激活面板内查找
seg_select = Select(WebDriverWait(active_panel,10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "select[name*='toll']"))
))
day_select = Select(active_panel.find_element(By.CSS_SELECTOR, "select[name*='day']"))
time_select = Select(active_panel.find_element(By.CSS_SELECTOR, "select[name*='time']"))
submit_btn = WebDriverWait(active_panel,10).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "input.wpcf7-submit"))
)

# 选择表单值
if not other_tab:
    seg_select.select_by_value("277")
else:
    seg_select.select_by_value("283")
day_select.select_by_value("monday")
time_select.select_by_value("00:00:00")

# 提交
submit_btn.click()

注意事项 #

• 原有代码存在变量名不一致问题：定义的选择器变量名为day、time，查找时使用了未定义的day_css、time_css，运行前需要修正
• 原有代码中JS点击方法拼写错误，正确写法为driver.execute_script("arguments[0].click();", element)，但只要选对了元素，原生Selenium点击即可生效，不需要强制用JS点击
• 不要使用写死的长层级CSS选择器，页面DOM结构微调就会导致定位失效，优先基于元素的class、name等稳定特征，在确定的父容器内查找。

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