Python Selenium无法定位提交后生成的reveal-overlay确认弹窗

环境配置 #

当前在Python3.7的AWS Lambda函数中运行，WebDriver配置如下：

options = Options()
options.binary_location = '/opt/headless-chromium'
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--single-process')
options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome('/opt/chromedriver',chrome_options=options)
driver.maximize_window()

问题场景 #

已成功选择预约日期并定位提交按钮，提交按钮HTML结构：

<input type="submit" name="commit" value="Reprogramar" id="appointments_submit" data-confirm="{&quot;title&quot;:&quot;¿Desea reprogramar esta cita?&quot;,&quot;ok&quot;:&quot;Confirmar&quot;,&quot;cancel&quot;:&quot;Cancelar&quot;}" data-disable-with="Por favor, espere." class="button primary">

点击提交按钮的代码：

appointments_submit = driver.find_element(By.ID, 'appointments_submit')
appointments_submit.click()

点击后页面body动态生成带reveal-overlay类的确认弹窗，弹窗HTML结构：

<div class="reveal-overlay" style="display: block;"><div data-reveal="ib04bi-reveal" class="reveal " role="dialog" aria-hidden="false" tabindex="-1" style="display: block; top: 97px;">
  <h2 data-confirm-title="" class="h3 text-center alert-icon">¿Desea reprogramar esta cita?</h2>
  <p data-confirm-body="" class=""></p>
  <div data-confirm-footer="" class="text-center">
    <a data-confirm-cancel="" class="button secondary">Cancelar</a>
  <a class="button alert">Confirmar</a></div>
<a aria-label="Close modal" class="close-button" data-close="">
  <span aria-hidden="true" class="fas fa-times"></span>
  </a>
  </div></div>

定位失败情况 #

尝试以下代码定位确认按钮失败：

confirmation_button = driver.find_element(By.CSS_SELECTOR, 'body > div.reveal-overlay > div > div > a.button.alert')
confirmation_button.click()

报错：

[ERROR] NoSuchElementException: Message: no such element: Unable to locate element: 
{
    "method": "css selector",
    "selector": "body > div.reveal-overlay > div > div > a.button.alert"
}

使用WebDriverWait仍抛出TimeOutException：

confirmation_button = WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.CSS_SELECTOR, "body > div.reveal-overlay > div > div > a.button.alert")))
confirmation_button.click()

排查与解决方案 #

1. 简化定位选择器

避免使用过于严格的层级选择器，改用更精准且灵活的定位方式：

• 通过类组合定位：

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  confirmation_button = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.button.alert")))
  confirmation_button.click()
  

• 通过按钮文本定位：

  confirmation_button = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[text()='Confirmar']")))
  confirmation_button.click()
  

2. 检查iframe上下文

部分页面会将弹窗嵌入iframe中，先切换到默认上下文再尝试定位：

driver.switch_to.default_content()
confirmation_button = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[text()='Confirmar']")))
confirmation_button.click()

3. 修复headless模式渲染问题

AWS Lambda的headless环境中，maximize_window()可能不生效，添加固定窗口尺寸参数：
修改WebDriver配置，添加：

options.add_argument('--window-size=1920,1080')

替换原有的driver.maximize_window()语句。

4. 确认提交按钮的点击有效性

若提交按钮是通过JS绑定事件，直接click()可能未触发弹窗，改用JS执行点击：

driver.execute_script("arguments[0].click();", appointments_submit)
# 之后再等待弹窗按钮
confirmation_button = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[text()='Confirmar']")))
confirmation_button.click()

5. 验证弹窗是否生成

点击提交后打印页面源码，确认弹窗是否存在：

import time

appointments_submit.click()
time.sleep(1)  # 短暂等待渲染
print(driver.page_source)

若源码中无弹窗，需检查提交操作是否触发了正确的事件，或是否有前置验证未通过导致弹窗未弹出。

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