在web自动化测试中，很多时候我们需要获取输入框的实际生效属性，也就是计算属性值，而不是标签上直接定义的初始属性，这类需求在验证样式、动态属性等场景下非常常见。
什么是计算属性
计算属性是浏览器在渲染页面时，根据CSS规则、元素状态等计算出来的最终生效的属性值。比如给输入框设置了width样式，不同浏览器可能会有不同的默认计算值，直接读取标签的style属性可能无法拿到最终的渲染宽度，这时候就需要获取计算属性。
Selenium获取计算属性的核心方法
Selenium中获取元素计算属性主要依靠execute_script方法执行JavaScript代码，调用浏览器的getComputedStyle接口实现。下面以Python版的Selenium为例讲解具体操作。
基础获取方式
首先我们需要初始化浏览器驱动，打开目标页面，定位到输入框元素，然后执行对应的JavaScript代码获取计算属性：
from selenium import webdriver
from selenium.webdriver.common.by import By
# 初始化Chrome驱动
driver = webdriver.Chrome()
# 打开测试页面
driver.get("http://ipipp.com/test_input.html")
# 定位输入框元素
input_element = driver.find_element(By.ID, "test_input")
# 执行JavaScript获取计算属性，这里获取输入框的计算宽度
computed_width = driver.execute_script(
"return window.getComputedStyle(arguments[0]).getPropertyValue('width');",
input_element
)
print(f"输入框的计算宽度是：{computed_width}")
# 关闭浏览器
driver.quit()获取多个计算属性
如果需要一次性获取多个计算属性，可以修改执行的JavaScript代码，批量返回结果：
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get("http://ipipp.com/test_input.html")
input_element = driver.find_element(By.ID, "test_input")
# 获取多个计算属性：宽度、高度、边框颜色
js_script = """
const computedStyle = window.getComputedStyle(arguments[0]);
return {
width: computedStyle.getPropertyValue('width'),
height: computedStyle.getPropertyValue('height'),
borderColor: computedStyle.getPropertyValue('border-color')
};
"""
result = driver.execute_script(js_script, input_element)
print(f"计算宽度：{result['width']}")
print(f"计算高度：{result['height']}")
print(f"边框颜色：{result['borderColor']}")
driver.quit()不同属性类型的获取注意事项
不同类型的属性在获取时有一些需要注意的点：
- 尺寸类属性：比如
width、height、padding等，返回的结果会带单位，比如200px，如果需要数值可以进一步处理。 - 颜色类属性：返回的是浏览器标准化后的颜色值，比如
rgb(255, 0, 0)，即使你设置的是red也会返回标准格式。 - 动态属性：如果输入框的属性是动态变化的，比如聚焦时改变边框颜色，需要先触发对应的操作再获取计算属性。
动态属性获取示例
下面是先让输入框获取焦点，再获取聚焦状态下的边框颜色计算属性的示例：
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Chrome()
driver.get("http://ipipp.com/test_input.html")
input_element = driver.find_element(By.ID, "test_input")
# 创建动作链，让输入框获取焦点
ActionChains(driver).click(input_element).perform()
# 获取聚焦后的边框颜色计算属性
focus_border_color = driver.execute_script(
"return window.getComputedStyle(arguments[0]).getPropertyValue('border-color');",
input_element
)
print(f"输入框聚焦后的边框颜色：{focus_border_color}")
driver.quit()常见问题与解决方案
在实际使用中可能会遇到一些问题，下面列出常见的场景和解决方法：
| 问题场景 | 解决方案 |
|---|---|
| 获取到的计算属性为空 | 检查元素是否已经正确加载，可以在获取前添加显式等待，确保元素处于可交互状态 |
| 获取的属性和预期不符 | 确认属性名称是否正确，CSS属性名需要使用连字符格式，比如border-color而不是borderColor |
| 执行JavaScript报错 | 检查传入的元素是否正确，getComputedStyle的参数需要是DOM元素，不是Selenium的WebElement对象，通过arguments[0]传入即可 |
总结
通过Selenium的execute_script方法结合浏览器的getComputedStyle接口，可以稳定获取输入框的计算属性值。核心是先定位到目标输入框元素，然后将元素作为参数传递给JavaScript代码，调用对应的接口获取属性。在获取动态属性时，需要先触发对应的元素状态变化，再进行属性获取。掌握这个方法可以解决很多自动化测试中属性验证的需求。