如何使用 Selenium WebDriver 和 python 获取 Web 元素的颜色？

Posted 2023-02-23

【中文标题】如何使用 Selenium WebDriver 和 python 获取 Web 元素的颜色？

【英文标题】：How to get a color of a web element using Selenium WebDriver with python?

【发布时间】：2013-02-12 16:24:15

【问题描述】：

如何定位十六进制格式的网页元素的背景颜色？使用我当前的 selenium webdriver python 代码，它以 RGB 格式返回背景颜色。

这是我正在查看的 html 元素

div class="bar" style="background-color: #DD514C; background-image: -moz-linear-gradient(center top , #EE5F5B, #C43C35); background-image: -webkit-linear-gradient(top , #EE5F5B, #C43C35); background-image: -ms-linear-gradient(top , #EE5F5B, #C43C35); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EE5F5B, endColorstr=#C43C35, GradientType=0); background-repeat: repeat-x; color: #ffffff; width: 11.5%"

我的 webdriver python 代码是：

find_element_by_class_name("bar").get_attribute("style")

它正在返回带有 rgb 格式颜色的样式。我想专门获取十六进制格式的背景颜色，以便我可以将它与我的预期值进行比较。我现在得到以下输出：

background-color: rgb(221, 81, 76); background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(196, 60, 53)); background-repeat: repeat-x; color: rgb(255, 255, 255); width: 11.5%;

【问题讨论】：

我找到了很多使用getCssValue for Java的解决方案？ getCssValue 的 python 等价物是什么？

python 等效项是 element.value_of_css_property('background-color')。但它不返回十六进制（Java 也不返回：code.google.com/p/selenium/source/browse/java/client/src/org/…）。 unutbu 的答案会给你十六进制。

谁能帮助我告诉我如何使用python更改这个RGB值

【参考方案1】：

你正在寻找value_of_css_property('background-color'):

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

但是，这将返回字符串rgb(221, 81, 76)。为了获得它的十六进制值，您可以使用@unutbu 的答案：

import re
...
rgb = find_element_by_class_name("bar").value_of_css_property('background-color')

r,g,b = map(int, re.search(
             r'rgb\((\d+),\s*(\d+),\s*(\d+)', rgb).groups())
color = '#%02x%02x%02x' % (r, g, b)

而您的十六进制 color 是字符串 #dd514c。

【参考方案2】：

要转换颜色，可以直接使用 selenium 的 Color 类：

from selenium.webdriver.support.color import Color

rgb = find_element_by_class_name("bar").value_of_css_property('background-color')
hex = Color.from_string(rgb).hex

Selenium docs

【参考方案3】：

import re

# style = find_element_by_class_name("bar").get_attribute("style")

style = 'background-color: rgb(221, 81, 76); background-image: -moz-linear-gradient(center top , rgb(238, 95, 91), rgb(196, 60, 53)); background-repeat: repeat-x; color: rgb(255, 255, 255); width: 11.5%;'

r,g,b = map(int, re.search(
    r'background-color: rgb\((\d+),\s*(\d+),\s*(\d+)\)', style).groups())
print(':X:X:X'.format(r, g, b))

产量

DD514C

【参考方案4】：

由于返回的格式与元组匹配，因此无需使用 're' 即可实现，其中返回是 'rgba' 字符串：

import ast

rgba = element.value_of_css_property("background-color")
r, g, b, alpha = ast.literal_eval(rgba.strip("rgba"))
hex_value = '#%02x%02x%02x' % (r, g, b)
return hex_value, alpha

字符串是 'rgb' 的地方只是省略了“alpha”

import ast

rgb = element.value_of_css_property("background-color")
r, g, b = ast.literal_eval(rgb.strip("rgb"))
hex_value = '#%02x%02x%02x' % (r, g, b)
return hex_value

由于提出了原始问题，现在首选的方法是使用硒颜色支持模块：

一个简单的指南是here