### 使用 Selenium 操作折叠面板 (el-collapse-item) 在现代 Web 开发中，折叠面板是一种常见的交互组件，通常用于隐藏或显示部分内容。以下是如何使用 Selenium 对基于 Vue.js 或其他前端框架中的 `el-collapse-item` 组件进行操作的方法。 #### 识别折叠面板的结构 大多数折叠面板由两部分组成：标题（触发器）和内容区。以 Element Plus 的 `el-collapse-item` 为例，HTML 结构大致如下[^1]： ```html <div class="el-collapse"> <div class="el-collapse-item" aria-expanded="false"> <div class="el-collapse-item__header">标题</div> <div class="el-collapse-item__wrap"> <div class="el-collapse-item__content">内容...</div> </div> </div> </div> ``` 其中，`.el-collapse-item__header` 是触发折叠的核心元素，点击它会改变折叠状态。 #### 示例代码：展开/收起折叠面板 以下是使用 Selenium 展开或收起折叠面板的具体实现方法[^2]： ```python from selenium import webdriver from selenium.webdriver.common.by import By import time # 初始化 WebDriver driver = webdriver.Chrome() try: # 打开目标页面 driver.get("https://example.com/page-with-collapsible-panel") # 查找折叠面板的标题元素 collapse_header = driver.find_element(By.CLASS_NAME, "el-collapse-item__header") # 获取初始状态 initial_state = collapse_header.parent.get_attribute("aria-expanded") == "true" # 如果未展开则点击标题 if not initial_state: collapse_header.click() time.sleep(2) # 等待动画结束 # 验证内容是否可见 content_area = driver.find_element(By.CLASS_NAME, "el-collapse-item__content") assert content_area.is_displayed(), "内容区域不可见!" finally: # 清理资源 driver.quit() ``` #### 处理解耦合的状态变化 由于许多折叠面板涉及 JavaScript 动画效果，因此需要适当增加等待时间以确保 DOM 更新完成后再验证结果。可以结合显式等待来提高稳定性[^3]： ```python from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC # 显式等待直到内容区域变为可见 WebDriverWait(driver, 10).until( EC.visibility_of_element_located((By.CLASS_NAME, "el-collapse-item__content")) ) ``` #### 实现多次折叠与展开的操作 如果需要连续测试多个折叠项的行为，可以通过遍历所有 `.el-collapse-item` 并逐一操作它们的头部标签[^4]： ```python collapse_items = driver.find_elements(By.CLASS_NAME, "el-collapse-item") for item in collapse_items: header = item.find_element(By.CLASS_NAME, "el-collapse-item__header") current_state = item.get_attribute("aria-expanded") == "true" if not current_state: header.click() time.sleep(2) # 等待动画完成后继续 # 验证对应的子内容是否已展示 try: content = item.find_element(By.CLASS_NAME, "el-collapse-item__content") assert content.is_displayed(), f"{item.text} 的内容未能正常显示!" except Exception as e: print(f"发生错误: {str(e)}") ``` --- ###