本文介绍如何使用 selenium 的 getcssvalue() 方法精准获取并验证 webtable 中某列（如 name 列）内嵌套元素（如姓名与性别）各自独立的字体大小，避免因父容器样式干扰导致误判。
在实际自动化测试中，仅定位到
并调用 getCssValue("font-size") 获取的是该容器自身的字体大小（即父级 div 的 font-size），而无法反映其内部不同子元素（如 "Sam Michaels" 和 Male）的真实样式。因此，必须精准定位到目标文本所在的 DOM 节点，再分别校验。
以你的 DOM 结构为例，Name 列每行包含两个语义层级：
- 主名称（如 "Sam Michaels"）：通常继承自父 div 或由顶层 渲染；
- 性别（如 "Male"）：明确包裹在带内联样式的 中。
✅ 正确做法是分层定位并逐个验证：
// 定位 Name 列的所有行单元格（假设为多行）
List<WebElement> nameCells = driver.findElements(By.xpath("//div[@col-id='Name']"));
for (int i = 0; i < nameCells.size(); i++) {
WebElement cell = nameCells.get(i);
// ✅ 获取主名称文本所在 span（注意：文本节点本身无样式，需找其最近的有样式的父 span）
// 根据结构，名称文本位于第一个 <span><span> 内，但无内联 font-size → 继承自父 div 或全局样式
String nameFontSize = cell.getCssValue("font-size"); // 获取容器默认字号（如用于"Sam Michaels"）
// ✅ 精准定位性别 span（带明确 font-size 样式）
WebElement genderSpan = cell.findElement(By.xpath(".//span[@style and contains(@style, 'font-size')]"));
String genderFontSize = genderSpan.getCssValue("font-size"); // 返回 "1.2rem"（Selenium 自动解析为 px，如 "19.2px"）
System.out.printf("Row %d — Name font: %s, Gender font: %s%n", i + 1, nameFontSize, genderFontSize);
// ✅ 断言示例（转换为数值便于比较）
double nameSizePx = parseFontSizeToPx(nameFontSize);
double genderSizePx = parseFontSizeToPx(genderFontSize);
assertThat(nameSizePx).isGreaterThan(genderSizePx); // 验证“姓名”比“性别”字号大
}? 辅助方法：将 CSS 字体值统一转为像素（px）进行断言
public static double parseFontSizeToPx(String cssValue) {
if (cssValue == null || cssValue.isEmpty()) return 0;
if (cssValue.endsWith("px")) return Double.parseDouble(cssValue.replace("px", "").trim());
if (cssValue.endsWith("rem")) {
// 假设根元素 font-size = 16px（标准浏览器默认），1rem = 16px
double remValue = Double.parseDouble(cssValue.replace("rem", "").trim());
return remValue * 16;
}
if (cssValue.endsWith("%")) {
// 简化处理：按父元素 16px 基准换算（实际需结合 computed style）
double pct = Double.parseDouble(cssValue.replace("%", "").trim());
return 16 * pct / 100;
}
return Double.parseDouble(cssValue); // 如 "18px" 已处理，其他情况可扩展
}⚠️ 关键注意事项：
- getCssValue("font-size") 返回的是计算后样式（computed value），单位统一为 px（即使 HTML 中写的是 rem、em 或 %），但需注意浏览器渲染差异；
- 不要依赖 getText() 或文本节点（Text node）调用 getCssValue() —— 文本节点无样式属性，必须定位到承载样式的 HTML 元素；
- 若列中存在动态渲染或虚拟滚动，需确保目标元素已加载并可见（可加 WebDriverWait 显式等待）；
- 对于复杂字体继承链，建议结合浏览器开发者工具的 “Computed” 面板验证预期值，再编写断言。
通过以上方式，你不仅能准确识别 Name 列中不同语义内容的字体差异，还能构建稳定、可维护的视觉一致性校验逻辑，真正实现 UI 层面的精细化验证。
