如何验证Web表格中Name列内的字体大小？

手动验证（浏览器控制台操作） #

1. 打开浏览器开发者工具（按F12），用XPath //div[@col-id='Name']定位到Name列的目标单元格。
2. 验证姓名（如Sam Michaels）的字体大小：
   • 找到包裹姓名的第一层子span（对应DOM里的<span>"Sam Michaels" == $0</span>）。
   • 控制台执行代码：getComputedStyle(document.querySelector("//div[@col-id='Name'] span span")).fontSize，即可获取浏览器计算后的实际字体大小；也可以直接在Elements面板的「Styles」标签下查看「Computed」栏的font-size值。
3. 验证性别（如Male，你描述里的「年龄」应为笔误）的字体大小：
   • 找到带内联样式的span（对应DOM里的<span style="font-size: 1.2rem">Male</span>）。
   • 可以直接查看内联样式中的font-size:1.2rem，也能在控制台执行document.querySelector("//div[@col-id='Name'] span span[style]").style.fontSize快速获取内联样式值，或者在「Computed」栏查看实际渲染后的大小。

自动化验证（以Selenium Python为例） #

如果需要批量验证多行数据，用自动化脚本效率更高：

1. 定位Name列的单元格：

   from selenium import webdriver
   from selenium.webdriver.common.by import By
   
   driver = webdriver.Chrome()
   name_cell = driver.find_element(By.XPATH, "//div[@col-id='Name']")
   

2. 获取并验证姓名的字体大小：

   # 定位姓名对应的span元素
   name_element = name_cell.find_element(By.XPATH, "./span/span[1]")
   # 获取计算后的字体大小
   name_font_size = name_element.value_of_css_property("font-size")
   # 断言是否符合预期（示例为16px，替换成实际需求值）
   assert name_font_size == "16px"
   

3. 获取并验证性别字体大小：

   # 定位带内联样式的span元素
   gender_element = name_cell.find_element(By.XPATH, "./span/span[@style]")
   # 获取字体大小
   gender_font_size = gender_element.value_of_css_property("font-size")
   # 断言是否为预期的1.2rem（或对应的px值，取决于需求）
   assert gender_font_size == "1.2rem"
   

注意事项 #

• 浏览器会把rem单位转换为px渲染，所以计算后的font-size可能显示为px值，验证时要根据需求选择对应的单位类型。
• 若表格包含多行Name列数据，需要遍历每一行的单元格重复上述验证步骤。

内容的提问来源于stack exchange，提问作者Max Brian