如何验证网页表格中指定列内不同文本的字体大小

本文介绍如何使用 selenium 的 getcssvalue() 方法精准获取并验证 webtable 中某列（如 name 列）内嵌套元素（如姓名与性别）各自独立的字体大小，避免因父容器样式干扰导致误判。

在实际自动化测试中，仅定位到

并调用 getCssValue("font-size") 获取的是该容器自身的字体大小（即父级 div 的 font-size），而无法反映其内部不同子元素（如 "Sam Michaels" 和 Male）的真实样式。因此，必须精准定位到目标文本所在的 DOM 节点，再分别校验。

以你的 DOM 结构为例，Name 列每行包含两个语义层级：

• 主名称（如 "Sam Michaels"）：通常继承自父 div 或由顶层 渲染；
• 性别（如 "Male"）：明确包裹在带内联样式的 中。

✅ 正确做法是分层定位并逐个验证：

// 定位 Name 列的所有行单元格（假设为多行）
List nameCells = driver.findElements(By.xpath("//div[@col-id='Name']"));

for (int i = 0; i < nameCells.size(); i++) {
    WebElement cell = nameCells.get(i);

    // ✅ 获取主名称文本所在 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.getCssV
alue("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 层面的精细化验证。