前言
在进行UI自动化过程会遇到滚动条下拉、隐藏元素定位、只读属性元素的编辑、富文本处理等,此时可以使用JS执行器简化我们的一些处理操作。
具体应用
JS执行器的使用步骤:
1.先写个JS脚本,如果需要获取操作后的值,JS脚本前面需要加return
2.使用webdriver的execute_script()方法执行脚本;方法中传递2个参数或1个参数;传递2个参数时,分别传入JS脚本、要操作的页面元素;传递1个参数时,传入JS脚本,对整个webdriver做操作。
3.操作通过JS执行器注入了JS脚本的页面元素或webdriver对象
接下来我们以百度、12306网站为例,演绎具体用法
1.通过JS脚本,获取页面元素的属性值
from selenium import webdriver
driver = webdriver.Chrome()#创建浏览器对象
driver.maximize_window()#窗口最大化
driver.get(r'https://www.baidu.com')#访问百度
el = driver.find_element('id','su') #页面的百度一下元素
'''
写JS脚本,写JS脚本的步骤:
js:定义一个变量名js,用于存放所写的JS季报表
= :赋值
JS脚本全部用引号引起来,整个脚本就是一个字符串
arguments[0]:理解为占位符,代值被操作的元素或对象
.:连接被操作的元素对象与所做的具体操作
getAttribute():我们这里的举例的操作为:获取元素的某个属性值
JS脚本最前面加上return,是因为我们要获取对元素操作后的值
'''
js = "return arguments[0].getAttribute('value')" #JS脚本的意思为:返回某个元素的value属性的值
value = driver.execute_script(js,el)#执行JS脚本,传入的2个参数依次为:要执行的脚本、要操作的对象
print(value)#打印获取到的值
driver.quit()#关闭浏览器
执行的结果:
2.通过JS脚本,获取页面元素的文本值
from selenium import webdriver
driver = webdriver.Chrome()#创建浏览器对象
driver.maximize_window()#窗口最大化
driver.get(r'https://www.12306.cn/index/')#访问12306
#页面的出发日期元素
el = driver.find_element('xpath','/html/body/div[3]/div[2]/div/div[1]/div/div[2]/div[1]/div[1]/div[2]/label') #
js = "return arguments[0].innerHTML" #JS脚本的意思为:返回某个元素的文本值
value = driver.execute_script(js,el)#执行JS脚本,传入的2个参数依次为:要执行的脚本、要操作的对象
print(value)#打印获取到的值
driver.quit()#关闭浏览器
执行结果:
3.通过JS脚本,删除页面元素的属性值,然后对页面元素进行操作
我们发现出发日期输入框因为有readonly属性,导致这个输入框我们无法直接输入日期,在实际的自动化操作中我们就只能通过点击右边的日历控件,从而选择日期,这样操作就变得非常的复杂,现在我们通过执行JS脚本,删除中个输入框的readonly属性,实现对这个输入框直接输入日期
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()#创建浏览器对象
driver.maximize_window()#窗口最大化
driver.get(r'https://www.12306.cn/index/')#访问12306
#页面的出发日期输入框
el = driver.find_element('xpath','//input[@id="train_date" and @class="input"]')
js = "arguments[0].removeAttribute('readonly')" #JS脚本的意思为:移除某个元素的readonly属性
driver.execute_script(js,el)#执行JS脚本,传入的2个参数依次为:要执行的脚本、要操作的对象
sleep(1)#强制等待1秒
el.clear() #清空输入框内容
el.send_keys("2021-07-11")#对输入框进行输入操作
sleep(3)
driver.quit()#关闭浏览器
执行结果:
4.通过JS脚本,修改页面元素的属性值
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()#创建浏览器对象
driver.maximize_window()#窗口最大化
driver.get(r'https://www.baidu.com')#访问百度
el = driver.find_element('id','su') #页面的百度一下元素
js = "return arguments[0].setAttribute('value','AAAAA')" #JS脚本的意思为:返回某个元素的value属性的值
driver.execute_script(js,el)#执行JS脚本,传入的2个参数依次为:要执行的脚本、要操作的对象
sleep(10)
driver.quit()#关闭浏览器
执行结果:
5.执行JS脚本,进行滚动条操作
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()#创建浏览器对象
driver.maximize_window()#窗口最大化
driver.implicitly_wait(30)
driver.get(r'https://www.baidu.com')#访问百度
driver.find_element('id','kw').send_keys("它石科技")
driver.find_element('id','su').click()
sleep(3)
js = "document.documentElement.scrollTop=1000" #向下滚动
driver.execute_script(js)#执行JS脚本
sleep(3)
js1 = "document.documentElement.scrollTop=0" #先上滑动
driver.execute_script(js1)#执行JS脚本
sleep(3)
js2 = "window.scrollTo(100,200)" #左右滑动
driver.execute_script(js2)
sleep(3)
js3 = "arguments[0].scrollIntoView()"
el = driver.find_element('xpath','//span[text()="百度热搜"]')
sleep(1)
driver.execute_script(js3,el)
sleep(3)
driver.quit()#关闭浏览器
执行结果:
由于是动态的图,这里就不截图了,大家可以按照代码自己尝试
总结:
slenium底层就方式通过执行JS脚本来操作页面元素的,所以当我们使用普通封装的常规操作方法无法进行相关操作时,可以使用JS执行器来达到我们的操作目的。
最后感谢每一个认真阅读我文章的人,看着粉丝一路的上涨和关注,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走
在此特意为大家准备了一份13G的超实用干货学习资源,涉及的内容非常全面,涵盖功能测试、Python编程语言,接口测试、UI自动化测试、性能测试......包括软件学习路线图,50多天的上课视频、16个突击实战项目,80余个软件测试用软件,37份测试文档,70个软件测试相关问题,40篇测试经验级文章,上千份测试真题分享,还有2022软件测试面试宝典,还有软件测试求职的各类精选简历,希望对大家有所帮助…..关注下方公众号免费获取~