在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()