如何使用Watir抓取以背景URL图片形式展示的星级评分

这类单图背景实现的星级评分用的是CSS雪碧图方案：整张背景图包含0星到满星的所有显示状态，页面通过调整background-position的偏移值裁剪出对应星级的区域展示，没有直接把评分数值写在DOM文本里，直接读元素内容拿不到结果，按照下面的步骤抓取即可：

• 首先定位到挂载星级背景的DOM元素。这类元素一般带有rating、star相关的类名，紧邻评分展示文本，用Watir常规定位语法找到对应元素即可，示例：

# 定位星级元素，可根据实际页面的类名、层级调整定位规则
rating_element = browser.div(class: /rating-stars/)

• 读取元素渲染后的计算样式，不要直接读标签上写的内联样式——很多站点的背景样式写在外部CSS文件里，读内联属性会拿不到值，用Watir内置的样式读取方法拿两个核心属性：背景偏移值、背景图尺寸，示例：

computed_style = rating_element.style
# 拿到类似 "-40px 0px" 格式的偏移值
bg_position = computed_style['background-position']
# 拿到类似 "100px 20px" 格式的背景图总尺寸
bg_size = computed_style['background-size']

• 按照偏移比例换算实际星级。绝大多数这类星级雪碧图是横向排布的：满星5分对应整张图的总宽度，背景向左偏移的距离占总宽度的比例乘以5，就是实际评分。
  举个实际计算的例子：如果背景图总宽度是100px（每20px宽度对应1颗星），当前读取到的横向偏移是-60px，那么实际评分就是 (60 / 100) * 5 = 3分。
• 特殊场景适配：如果碰到雪碧图是纵向排布的站点，就取纵向偏移值和背景图总高度代入计算，逻辑完全一致；如果站点做了半星的雪碧图切片，这个换算方法也能准确算出带0.5的小数评分，不会有误差。

小提示：如果碰到偏移值用百分比写的站点，直接按百分比比例换算就行，不用转像素值，逻辑完全一样。

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