本文介绍使用 selenium 的 `getcssvalue("font-size")` 方法精准获取并校验 webtable 中指定列（如 name 列）内不同文本元素（如姓名与性别）的字体大小，支持像素、rem、em 等单位，并提供实用代码示例与关键注意事项。
在自动化测试中，验证 UI 样式（如字体大小）是确保前端渲染符合设计规范的重要环节。针对您描述的场景——WebTable 的 Name 列中每行包含两个嵌套文本：“Sam Michaels”（主名称，大字号）和 <span style="font-size: 1.2rem">Male</span>（辅助信息，小字号）——不能仅对最外层 div[@col-id='Name'] 调用 getCssValue("font-size")，因为该值通常继承自父容器或未显式设置，无法反映内部实际渲染效果。
✅ 正确做法是：定位到具体承载文本的子元素（如 <span>），再调用 getCssValue("font-size") 获取其计算后的 CSS 值。例如：
// 定位 Name 列所有行中的「主名称文本」（直接子 span 内的纯文本节点前的 span）
List<WebElement> nameElements = driver.findElements(By.xpath("//div[@col-id='Name']/span/span[1]"));
// 或更稳健地：匹配不含 style 属性的 span（即主名称所在 span）
List<WebElement> nameSpans = driver.findElements(By.xpath("//div[@col-id='Name']/span/span[not(@style)]"));
for (int i = 0; i < nameSpans.size(); i++) {
String computedSize = nameSpans.get(i).getCssValue("font-size");
System.out.println("Row " + (i+1) + " name font-size: " + computedSize);
// 输出示例: "16px" 或 "1.5rem"
}同样，可单独校验“Male”等带内联样式的子项：
List<WebElement> genderSpans = driver.findElements(By.xpath("//div[@col-id='Name']//span[@style and contains(@style, 'font-size')]"));
for (WebElement span : genderSpans) {
String size = span.getCssValue("font-size"); // 返回标准化值，如 "19.2px"（1.2rem 在 16px 基准下）
assert size.equals("19.2px") : "Gender font-size mismatch!";
}⚠️ 关键注意事项：
- getCssValue("font-size") 返回的是浏览器计算后的绝对值（如 "19.2px"），而非原始 CSS 值（如 "1.2rem"），便于断言；
- 务必使用 findElements() 遍历所有行，避免只校验首行导致漏测；
- 若元素动态加载，请配合 WebDriverWait 显式等待元素可见；
- 字体大小受 CSS 继承、媒体查询、根字体（<html> 的 font-size）影响，建议在统一视口与基础样式下执行校验；
- 对比时建议转换为统一单位（如全部转为 px），可借助 JavaScript 执行器增强精度（如 getComputedStyle(...).fontSize）。
通过精准定位 + getCssValue 组合，即可实现对复杂嵌套列中多级文本样式的可靠验证，显著提升 UI 自动化测试的完整性与可信度。
