自动化测试下拉框选项定位报错

Question

我现在遇到一个问题，系统的前端框架是用vue + element，就导致下拉框的元素经过浏览器解析就变成input了，不是常用的select元素，那么我现在做web自动化的时候，定位下拉框元素该怎么做呀，指点指点
我写的代码如下

input_element  = driver.find_element(By.XPATH,'/html/body/div[1]/div/div[3]/div/form/div[4]/div[2]/form/div/div[1]/div/div/div/input')
input_element.click()
select = Select(input_element)
select.select_by_visible_text('货物')

报错问题如下

Answer 1

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

在处理Vue.js和Element UI构建的应用程序时，由于它们可能会动态地将<select>转换为<input>元素，因此传统的Select类可能不适用。在这种情况下，你需要采取不同的方法来操作下拉框。

首先，我们可以尝试使用JavaScript执行来模拟用户选择下拉框中的一个选项。以下是修改后的代码：

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

# 初始化驱动器（这里以Chrome为例）
driver = webdriver.Chrome()

# 访问目标URL
driver.get("http://your-url.com")

# 等待元素加载完成
wait = WebDriverWait(driver, 10)

# 找到输入框元素并点击它
input_element = wait.until(EC.presence_of_element_located((By.XPATH, '/html/body/div[1]/div/div[3]/div/form/div[4]/div[2]/form/div/div[1]/div/div/div/input')))
input_element.click()

# 使用JavaScript执行来选择下拉框中的选项
javascript = """
    var element = arguments[0];
    var optionText = arguments[1];

    // 获取所有子元素（包括option标签）
    var options = element.querySelectorAll('option');

    for (var i = 0; i < options.length; i++) {
        if (options[i].innerText === optionText) {
            options[i].selected = true;
            break;
        }
    }
"""

# 传递输入框元素和要选择的文本给JavaScript执行
driver.execute_script(javascript, input_element, '货物')

# 关闭浏览器
driver.quit()

这段代码首先等待元素加载，然后找到输入框并触发点击事件，接着通过JavaScript执行来模拟用户在下拉框中选择“货物”这个选项。

请确保替换上述代码中的"http://your-url.com"为实际的网页地址，并根据实际情况调整XPath表达式以匹配正确的下拉框输入元素。如果页面结构有所变化，你可能需要更新XPath以准确地定位到元素。