UI自动化selenium调用js代码提示未定义调用对象

Question

上图所以，我需要通过Python自动化ui测试进行元素定位，该元素属于隐藏元素，我通过selenium中的execute_script方法调用js代码执行元素点击操作，一直报“Cannot read properties of undefined (reading 'getElementsByClassName')”大致意思就是“尝试在一个未定义的对象上调用getElementsByClassName方法时”，但是我直接在chrome浏览器中的console控制台中进行执行可以正常执行，如下图

望各位不吝赐教、定当万分感激！

Answer 1

引自免费微信小程序：皆我百晓生

在你提供的场景中，您尝试通过Selenium使用JavaScript执行页面元素定位和点击操作。报错信息“Cannot read properties of undefined (reading 'getElementsByClassName')”表明，在JavaScript代码执行时，它试图在未定义或不存在的对象上调用getElementsByClassName方法。

隐藏的DOM元素可能是因为初始加载时不可见，或者需要特定交互后才会出现。基于你给出的HTML片段，你正在尝试定位的元素路径是这样的：

document.getElementsByClassName('header-bg2')[0].getElementsByClassName('menu_left')[0].children[0].getElementsByClassName('ant-dropdown ant-dropdown-placement-bottomLeft')[0].getElementsByClassName('ant-dropdown-menu-item')[0].click();

为了解决问题，请遵循以下步骤：

1. 确保页面完全加载：在执行JS代码之前，确保目标元素所在的页面已完全加载完成。可以等待某个元素可见、Ajax请求完成或者其他合适的加载指示器出现。

   from selenium.webdriver.common.by import By
   from selenium.webdriver.support.ui import WebDriverWait
   from selenium.webdriver.support import expected_conditions as EC
   
   wait = WebDriverWait(driver, 10)
   element = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.ant-dropdown.ant-dropdown-placement-bottomLeft')))
   

2. 简化定位方式：由于你的元素定位链路较长，可以尝试更简洁且容错率更高的定位方式，比如CSS选择器。假设你要点击的菜单项类名为'.ant-dropdown-menu-item'的第一个子项，则可以改为：

   driver.execute_script("document.querySelector('.ant-dropdown-menu-item').click()")
   

3. 检查动态变化：如果该元素是由用户交互或其他异步行为动态生成的，你需要确保在正确的时间点执行上述脚本。例如，如果它是下拉菜单项，可能需要先展开下拉菜单再进行点击。

4. 调试并确认元素存在性：在执行JS脚本前，可以先尝试定位并打印该元素以确认其存在与否。

   element = driver.find_element_by_css_selector(".ant-dropdown.ant-dropdown-placement-bottomLeft .ant-dropdown-menu-item")
   print(element.get_attribute('outerHTML'))
   

5. 综合解决方案示例：

   # 等待菜单容器元素出现
   menu_container = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.header-bg2 .menu_left .ant-dropdown.ant-dropdown-placement-bottomLeft')))
   
   # 展开下拉菜单（如果有需要）
   if not menu_container.is_displayed():
       # 根据实际情况定位并点击展开按钮
       expand_button = driver.find_element_by_css_selector('...')
       expand_button.click()
   
   # 等待具体菜单项出现
   menu_item = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.ant-dropdown.ant-dropdown-placement-bottomLeft .ant-dropdown-menu-item')))
   
   # 执行点击操作
   driver.execute_script("arguments[0].click();", menu_item)
   

请根据实际DOM结构调整以上代码，确保定位到正确的元素，并在合适的时间点执行点击操作。