[开发测试]如何使用Selenium实现高亮显示正在操作的元素

?

?

????? 使用过HP公司的自动化测试工具QTP（QTP，即：Quick Test Professional，现在升级的版本为UFT，即：Unified Functional Testing）的读者朋友们，一定都知道当您在对象库中选中一个对象时，就会在Active Screen中高亮显示该对象。这样有一个好处就是让人很直观的知道对象与页面元素的对应关系。如果您在操作每一个页面元素前，高亮显示一下它，即使不懂代码的同学是不是也能够很清晰的知道您的脚本做了些什么呢？那么怎么实现这样的效果呢？您可以通过使用JavaScript脚本来实现它，代码如下。

from selenium import webdriver
from time import sleep

def HighLight(driver,element):
    #封装好的高亮显示页面元素的方法
    #使用JavaScript代码将传入的页面元素对象的边框颜色
    #3次循环，边框颜色先蓝后红中间各停留1秒，产生闪烁效果
    for i in range(0,3):
        driver.execute_script("arguments[0].setAttribute('style',arguments[1]);",
                          element, "border:2px solid blue;")
        sleep(1)
        driver.execute_script("arguments[0].setAttribute('style',arguments[1]);",
                          element, "border:2px solid red;")
        sleep(1)
    #恢复页面元素原装
    driver.execute_script("arguments[0].setAttribute('style',arguments[1]);",
                          element, "")

driver=webdriver.Chrome()
driver.implicitly_wait(10) 
driver.maximize_window()
driver.get("https://cn.bing.com/")
input_search=driver.find_element_by_name('q')
HighLight(driver,input_search)
input_search.send_keys('异步社区')
btn_go=driver.find_element_by_name('go')
HighLight(driver,btn_go)
sleep(10)
btn_go.click()
sleep(5)
driver.quit()

?????? 这里，笔者定义了一个HighLight()函数，其包括2个参数，driver和element，driver指定浏览器驱动实例对象，element是要操作的页面元素对象。

?????? 为了能够让读者朋友们更清楚的看到高亮显示的效果，在高亮显示“输入搜素词”文本框和“搜索网页”按钮后面各加入了一个10秒和5秒的等待时间。高亮显示效果如图1-94所示。

图1-94?? “输入搜素词”文本框高亮显示效果信息

?