使用Selenium获取type=submit的input元素实际展示的文本内容

你遇到的是CSS样式修改了元素展示内容，Selenium原生API无法直接获取渲染后文本的场景，有两种成熟的解决方式：

方案1：极简适配（已知固定全大写样式） #

你已经明确按钮应用了text-transform: uppercase规则，直接将获取到的原始value转为全大写即可，代码改动最小：

from selenium import webdriver

CHROME_DRIVER_PATH = "你的chromedriver路径"
driver = webdriver.Chrome(CHROME_DRIVER_PATH)
driver.get("https://www.saucedemo.com/")
login_button = driver.find_element_by_id("login-button")
# 直接将原始value转为全大写
display_text = login_button.get_property("value").upper()
print(display_text)  # 输出 LOGIN
driver.quit()

方案2：通用适配（兼容任意text-transform规则） #

如果不确定样式规则，或担心后续站点样式调整，可通过执行JavaScript获取浏览器计算后的样式规则，动态生成渲染后的展示文本，通用性更强：

from selenium import webdriver

CHROME_DRIVER_PATH = "你的chromedriver路径"
driver = webdriver.Chrome(CHROME_DRIVER_PATH)
driver.get("https://www.saucedemo.com/")
login_button = driver.find_element_by_id("login-button")
# 执行JS动态计算渲染后的文本
display_text = driver.execute_script("""
const targetBtn = arguments[0];
const rawVal = targetBtn.value;
const textTransformRule = window.getComputedStyle(targetBtn).textTransform;
switch(textTransformRule) {
    case 'uppercase': return rawVal.toUpperCase();
    case 'lowercase': return rawVal.toLowerCase();
    case 'capitalize': return rawVal.replace(/\\b\\w/g, char => char.toUpperCase());
    default: return rawVal;
}
""", login_button)
print(display_text)  # 输出 LOGIN
driver.quit()

原理解释 #

• input标签是单标签，没有内部文本节点，所以login_button.text返回空字符串属于正常表现
• get_property("value")拿到的是DOM属性的原始值，不会包含CSS渲染后的样式修改结果，因此只能拿到原始的"Login"
• 浏览器渲染时会根据CSS规则对展示内容做转换，该结果只能通过读取浏览器计算后的样式，再对原始值做对应转换得到

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