在UI的自动化测试中,我们也是需要使用JS来处理一些特殊的交互,比如针对浏览器的滑动操作,以及针对富文本的特殊处理,和针对只读属性的时间控件的处理。下面通过实际的案例来演示这部分的具体应用和案例实战
1.浏览器的华东
浏览器的华东主要分为浏览器的向上和向下,比如我们就可以百度搜索引擎为案例,我们进行关键字的搜索后,想点几下下一步的操作,但是下一步无法展示出来,就需要把页面华东到底部才可以展示出来,下面通过实际的案例来演示下这部分的具体应用,
代码如下
1 #! /usr/bin/env python
2 # -*- coding:utf-8 -*-
3 # author:贾超
4
5 from selenium import webdriver
6 import time as t
7
8 driver=webdriver.Chrome()
9 driver.maximize_window()
10 driver.get('http://www.baidu.com')
11 driver.implicitly_wait(30)
12 t.sleep(5)
13 driver.find_element_by_id('kw').send_keys('美女图片')
14 driver.find_element_by_id('su').click()
15 t.sleep(5)
16 #向下滑动
17 down="var q=document.documentElement.scrollTop=10000"
18 driver.execute_script(down) #调用JS的代码
19 t.sleep(5)
20 #向上滑动
21 up="var q=document.documentElement.scrollTop=0" #调用JS的代码
22 t.sleep(5)
我们可以看到 前置代码都是一样的,后面down以及up相关代码就是将浏览器向下滑动或者向上滑动
2.富文本的处理
现在互联网的产品基本都会使用到富文本的信息,针对富文本的特性,其实我们有两个思路来实现元素的定位方式,一种是iframe的思路,另外一种是JS的方式
下面我们使用JS的方式来进行处理,实现在富文本里面输入我们需要的内容,具体设计到的代码为
driver:webdriver实例化后的对象信息
content:富文本里面需要输入的文字内容
富文本操作的前提是需要进入所需要操作的iframe然后进行查找元素进行操作
1 from selenium import webdriver
2 import time as t
3
4 def richText(driver,content):
5 js="document.getElementById('ueditor_0').contentWindow.document.body.innerHTML='{0}'".format(content)
6 driver.execute_script(js)
7
8 driver=webdriver.Chrome()
9 driver.maximize_window()
10 driver.get('https://uutool.cn/ueditor/')
11 driver.implicitly_wait(30)
12 t.sleep(5)
13 #进入到iframe的框架
14 # driver.switch_to.frame('ueditor_0')
15 # t.sleep(5)
16 # driver.find_element_by_xpath('/html/body/p').send_keys('贾超太帅了')
17 # t.sleep(5)
18 richText(driver=driver,content='我宣布个事啊,我是帅哥')
19 t.sleep(5)
20 driver.quit()
在当中注释的代码为 运用iframe框架的方法来进行富文本的操作
3.时间控件
下面具体来看时间控件的处理,时间控件很多时候是只读属性,具体具体见如下的HTML的代码:
在如上的代码中可以很清晰的看到它是只读属性,那么我们知道input里面输入的内容最终是在value的属性。
下面通过具体的代码来实现这部分,实现在时间控件中填写我们想选择的时间,具体实现的代码为:
1 from selenium import webdriver
2 import time as t
3
4 def startTime(driver,content):
5 '''开始时间控件'''
6 js="$(\"input[placeholder='开始时间≥当前时间']\").removeAttr('readonly');" \
7 "$(\"input[placeholder='开始时间≥当前时间']\").attr('value','{0}')".format(content)
8 driver.execute_script(js)
9 #关于时间控件 如果需要对时间控件进行操作,我们需要用JS解除时间控件的只读属性 然后进行操作。所有input的标签 所要填写的内容都是在value里面
10 def endTime(driver,content):
11 '''结束时间控件'''
12 js="$(\"input[placeholder='结束时间>开始时间']\").removeAttr('readonly');" \
13 "$(\"input[placeholder='结束时间>开始时间']\").attr('value','{0}')".format(content)
14 driver.execute_script(js)
15
16 driver=webdriver.Chrome()
17 driver.maximize_window()
18 driver.get('file:///C:/Users/jiachao8/Desktop/time/Time/index.html')
19 driver.implicitly_wait(30)
20 startTime(driver=driver,content='2020-12-06 00:00:00')
21 t.sleep(5)
22 endTime(driver=driver,content='2021-12-06 10:00:00')
23 t.sleep(5)
24 driver.quit()