JS执行器在UI自动化测试中的应用

前言

在进行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 webdriverfrom time import sleepdriver = 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 webdriverfrom 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 webdriverfrom 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软件测试面试宝典，还有软件测试求职的各类精选简历，希望对大家有所帮助…..关注下方公众号免费获取~