selenium---判斷字體顏色

前言

在做web自動化的時候，對於一些彈出的提示信息的字體顏色，當然一般都是紅色的。那么當我們跑自動化時候，如何判斷提示新的字體顏色是否我們預期的結果呢？

個人思路

安靜這里先介紹下自己的思路：

1. 先獲取到提示信息的元素坐標點。
2. 想辦法獲取到前端中該元素的顏色屬性值
3. 最后通過獲取的屬性值與我們的預期值進行比較。

猛然一看該思路，啥用沒有。但是我們可以先翻閱selenium中的官方文檔，看看官方文檔中有沒有一些幫助內容

安靜從官方文檔中找到了  value_of_css_property() 

def value_of_css_property(self, property_name):
    """The value of a CSS property."""
    return self._execute(Command.GET_ELEMENT_VALUE_OF_CSS_PROPERTY, {
        'propertyName': property_name})['value']

該方法意思就是可以獲取到元素的CSS的屬性值。這不就解決了獲取元素的顏色屬性值了嗎？

實戰演示

安靜這里隨便找個網站先查看下錯誤提示信息的元素坐標，以及錯誤提示信息的字體顏色內容

通過代碼的形式查看下CSS的屬性值是否和我們的預期一樣。

from selenium import webdriver
import time
driver = webdriver.Chrome()
# 隨便找了個經常逛的網站。
driver.get('https://passport.juhe.cn/cas/login')
# 輸入賬號名
driver.find_element_by_name('username').send_keys('12345')
# 輸入密碼
driver.find_element_by_id('password-o').send_keys('1111111')
# 點擊登錄
driver.find_element_by_id('loginBtn').click()
time.sleep(1)
# 獲取提示字體信息
xx = driver.find_element_by_xpath('//*[@class="sysError"]').text
print(xx)
aa = driver.find_element_by_xpath('//*[@class="sysError"]')
# 獲取該元素的CSS屬性值
print(aa.value_of_css_property('color'))

 

通過執行后發現獲取的CSS屬性值基本上和我們在web頁面上的一樣，為啥說基本上呢，因為這web頁面CSS區域顯示的是rgba(254 ,81 , 74)沒有1

安靜也不確定對不對，於是再次查看selenium中的官方文檔，發現了selenium中有對字體顏色的標識內容

從文檔中可以看出來，可以對其顏色的格式內容進行轉換，這樣我們就可以來判斷是否字體顏色是否正確。

from selenium import webdriver
import time
from selenium.webdriver.support.color import Color
driver = webdriver.Chrome()
# 隨便找了個經常逛的網站。
driver.get('https://passport.juhe.cn/cas/login')
# 輸入賬號名
driver.find_element_by_name('username').send_keys('12345')
# 輸入密碼
driver.find_element_by_id('password-o').send_keys('1111111')
# 點擊登錄
driver.find_element_by_id('loginBtn').click()
time.sleep(1)
# 獲取提示字體信息
xx = driver.find_element_by_xpath('//*[@class="sysError"]').text
print(xx)
aa = driver.find_element_by_xpath('//*[@class="sysError"]')
# 獲取該元素的CSS屬性值
print(aa.value_of_css_property('color'))
# 查看#fe514a格式的rgb格式
print(Color.from_string('#fe514a').rgba)
# 查看顏色的hex格式。
print(Color.from_string('rgba(254, 81, 74, 1)').hex)

通過執行后發現，顏色內容是一致的。

PS：這里的rgba和hex表示顏色的標識，其實hex是十六進制，

總結

安靜簡單的通過一個案例，演示了如何進行判斷頁面中的字體顏色。在實踐中也遇到了一些困哪，通過查閱官方文檔進行解決了，也學習了兩個方法，一個是獲取CSS屬性，以及顏色的轉換支持。所以說遇到問題不要着急，看看官方文檔，說不定就有意外的收獲。好了，我是安靜。感謝您的閱讀。