51Testing软件测试论坛

标题: Web自动化，如何判断字体颜色？ [打印本页]
作者: lsekfe    时间: 2021-7-5 09:43
标题: Web自动化，如何判断字体颜色？
前言
　　在做web自动化的时候，对于一些弹出的提示信息的字体颜色，当然一般都是红色的。那么当我们跑自动化时候，如何判断提示新的字体颜色是否我们预期的结果呢？

　　个人思路
　　安静这里先介绍下自己的思路：
　　·先获取到提示信息的元素坐标点；
　　·想办法获取到前端中该元素的颜色属性值；
　　·最后通过获取的属性值与我们的预期值进行比较。
　　猛然一看该思路，啥用没有。但是我们可以先翻阅selenium中的官方文档，看看官方文档中有没有一些帮助内容。
　　安静从官方文档中找到了：
  1. def value_of_css_property(self, property_name):
  2.     """The value of a CSS property."""
  3.     return self._execute(Command.GET_ELEMENT_VALUE_OF_CSS_PROPERTY, {
  4.         'propertyName': property_name})['value']
复制代码
该方法意思就是可以获取到元素的CSS的属性值。这不就解决了获取元素的颜色属性值了吗？

　　实战演示
　　安静这里随便找个网站先查看下错误提示信息的元素坐标，以及错误提示信息的字体颜色内容。
通过代码的形式查看下CSS的属性值是否和我们的预期一样。
  1. from selenium import webdriver
  2. import time
  3. driver = webdriver.Chrome()
  4. # 随便找了个经常逛的网站。
  5. driver.get('https://passport.juhe.cn/cas/login')
  6. # 输入账号名
  7. driver.find_element_by_name('username').send_keys('12345')
  8. # 输入密码
  9. driver.find_element_by_id('password-o').send_keys('1111111')
  10. # 点击登录
  11. driver.find_element_by_id('loginBtn').click()
  12. time.sleep(1)
  13. # 获取提示字体信息
  14. xx = driver.find_element_by_xpath('//*[@class="sysError"]').text
  15. print(xx)
  16. aa = driver.find_element_by_xpath('//*[@class="sysError"]')
  17. # 获取该元素的CSS属性值
  18. print(aa.value_of_css_property('color'))
复制代码
　　通过执行后发现获取的CSS属性值基本上和我们在web页面上的一样，为啥说基本上呢，因为这web页面CSS区域显示的是rgba(254 ,81 , 74)，没有1。


　　安静也不确定对不对，于是再次查看selenium中的官方文档，发现了selenium中有对字体颜色的标识内容。


　　从文档中可以看出来，可以对其颜色的格式内容进行转换，这样我们就可以来判断是否字体颜色是否正确。
  1. from selenium import webdriver
  2. import time
  3. from selenium.webdriver.support.color import Color
  4. driver = webdriver.Chrome()
  5. # 随便找了个经常逛的网站。
  6. driver.get('https://passport.juhe.cn/cas/login')
  7. # 输入账号名
  8. driver.find_element_by_name('username').send_keys('12345')
  9. # 输入密码
  10. driver.find_element_by_id('password-o').send_keys('1111111')
  11. # 点击登录
  12. driver.find_element_by_id('loginBtn').click()
  13. time.sleep(1)
  14. # 获取提示字体信息
  15. xx = driver.find_element_by_xpath('//*[@class="sysError"]').text
  16. print(xx)
  17. aa = driver.find_element_by_xpath('//*[@class="sysError"]')
  18. # 获取该元素的CSS属性值
  19. print(aa.value_of_css_property('color'))
  20. # 查看#fe514a格式的rgb格式
  21. print(Color.from_string('#fe514a').rgba)
  22. # 查看颜色的hex格式。
  23. print(Color.from_string('rgba(254, 81, 74, 1)').hex)
复制代码
通过执行后发现，颜色内容是一致的。


　　PS：这里的rgba和hex表示颜色的标识，其实hex是十六进制。

　　总结
　　安静简单的通过一个案例，演示了如何进行判断页面中的字体颜色。
　　在实践中也遇到了一些困难，通过查阅官方文档进行解决了，也学习了两个方法，一个是获取CSS属性，以及颜色的转换支持。所以说遇到问题不要着急，看看官方文档，说不定就有意外的收获。
　　好了，我是安静，感谢您的阅读。






欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2