如何用Selenium C#验证PDF转译页面中指定文本的粗体样式

问题背景 #

你有一个转译为网页形式的PDF，其中包含如下结构的元素：

<div class="cs6C976429" style="width:671px;height:18px;line-height:17px;margin-top:98px;margin-left:94px;position:absolute;text-align:left;vertical-align:top;">
<nobr>INFORMATIONBOLD</nobr></div>

对应的CSS样式定义在style标签中，你需要验证INFORMATIONBOLD文本是否应用了粗体样式，但之前仅定位到style标签无法完成验证，以下提供两种可行解决方法：

方法1：获取元素实际渲染的字体权重（推荐） #

直接定位目标文本所在元素，通过Selenium的GetCssValue方法获取实际计算后的字体权重，这是最可靠的方式，能反映浏览器最终渲染的样式，不受CSS优先级或!important的影响。

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using NUnit.Framework;

// 初始化Chrome驱动
IWebDriver driver = new ChromeDriver();

try
{
    // 定位包含目标文本的nobr元素（也可直接定位上层div）
    IWebElement targetTextElement = driver.FindElement(By.CssSelector("div.cs6C976429 > nobr"));
    
    // 获取计算后的font-weight属性值
    string fontWeight = targetTextElement.GetCssValue("font-weight");
    
    // 判断是否为粗体：浏览器会将"bold"解析为数值700，需覆盖两种情况
    bool isTextBold = fontWeight.Equals("bold", StringComparison.OrdinalIgnoreCase) || fontWeight == "700";
    
    // 断言验证结果
    Assert.IsTrue(isTextBold, "INFORMATIONBOLD文本未应用粗体样式");
}
finally
{
    driver.Quit();
}

方法2：解析style标签中的CSS规则 #

如果仅需验证style标签内的CSS定义（而非实际渲染效果），可以提取style标签的文本内容，用正则表达式匹配目标类的font-weight属性值。

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using NUnit.Framework;
using System.Text.RegularExpressions;

IWebDriver driver = new ChromeDriver();

try
{
    // 定位style标签
    IWebElement styleTag = driver.FindElement(By.XPath("//style[@type='text/css']"));
    string cssContent = styleTag.Text;
    
    // 正则匹配.cs6C976429类中的font-weight属性，兼容不同空格、换行格式
    Regex cssRegex = new Regex(@"\.cs6C976429\s*\{\s*[^}]*font-weight\s*:\s*(\w+|\d+)\s*!important;");
    Match matchResult = cssRegex.Match(cssContent);
    
    if (matchResult.Success)
    {
        string fontWeightValue = matchResult.Groups[1].Value.Trim();
        bool isClassBold = fontWeightValue.Equals("bold", StringComparison.OrdinalIgnoreCase) || fontWeightValue == "700";
        
        Assert.IsTrue(isClassBold, ".cs6C976429类未定义粗体样式");
    }
    else
    {
        Assert.Fail("未在style标签中找到.cs6C976429的CSS规则");
    }
}
finally
{
    driver.Quit();
}

两种方法对比 #

• 方法1优先推荐：直接验证用户看到的实际效果，避免因CSS优先级、继承等问题导致的误判。
• 方法2适合仅需验证CSS代码定义的场景，但需注意正则表达式的兼容性（如处理不同的空格、换行格式）。

内容的提问来源于stack exchange，提问作者Nathalie Guzmán Isu