用Python实现ui自动化（四） javaScrip 富文本 时间控件

在UI的自动化测试中，我们也是需要使用JS来处理一些特殊的交互，比如针对浏览器的滑动操作，以及针对富文本的特殊处理，和针对只读属性的时间控件的处理。下面通过实际的案例来演示这部分的具体应用和案例实战

1.浏览器的华东

浏览器的华东主要分为浏览器的向上和向下，比如我们就可以百度搜索引擎为案例，我们进行关键字的搜索后，想点几下下一步的操作，但是下一步无法展示出来，就需要把页面华东到底部才可以展示出来，下面通过实际的案例来演示下这部分的具体应用，

代码如下

#! /usr/bin/env python
# -*- coding:utf-8 -*-
# author:贾超

from selenium import webdriver
import time as t

driver=webdriver.Chrome()
driver.maximize_window()
driver.get('http://www.baidu.com')
driver.implicitly_wait(30)
t.sleep(5)
driver.find_element_by_id('kw').send_keys('美女图片')
driver.find_element_by_id('su').click()
t.sleep(5)
#向下滑动
down="var q=document.documentElement.scrollTop=10000"
driver.execute_script(down)      #调用JS的代码
t.sleep(5)
#向上滑动
up="var q=document.documentElement.scrollTop=0"  #调用JS的代码
t.sleep(5)

我们可以看到 前置代码都是一样的，后面down以及up相关代码就是将浏览器向下滑动或者向上滑动

2.富文本的处理

现在互联网的产品基本都会使用到富文本的信息，针对富文本的特性，其实我们有两个思路来实现元素的定位方式，一种是iframe的思路，另外一种是JS的方式

下面我们使用JS的方式来进行处理，实现在富文本里面输入我们需要的内容，具体设计到的代码为

driver:webdriver实例化后的对象信息

content:富文本里面需要输入的文字内容

富文本操作的前提是需要进入所需要操作的iframe然后进行查找元素进行操作

from selenium import webdriver
import time as t

def richText(driver,content):
  js="document.getElementById('ueditor_0').contentWindow.document.body.innerHTML='{0}'".format(content)
driver.execute_script(js)

driver=webdriver.Chrome()
driver.maximize_window()
driver.get('https://uutool.cn/ueditor/')
driver.implicitly_wait(30)
t.sleep(5)
#进入到iframe的框架
# driver.switch_to.frame('ueditor_0')
# t.sleep(5)
# driver.find_element_by_xpath('/html/body/p').send_keys('贾超太帅了')
# t.sleep(5)
richText(driver=driver,content='我宣布个事啊，我是帅哥')
t.sleep(5)
driver.quit()

在当中注释的代码为 运用iframe框架的方法来进行富文本的操作

3.时间控件

下面具体来看时间控件的处理，时间控件很多时候是只读属性，具体具体见如下的HTML的代码：

在如上的代码中可以很清晰的看到它是只读属性，那么我们知道input里面输入的内容最终是在value的属性。

下面通过具体的代码来实现这部分，实现在时间控件中填写我们想选择的时间，具体实现的代码为：

from selenium import webdriver
import time as t

def startTime(driver,content):
  '''开始时间控件'''
  js="$(\"input[placeholder='开始时间≥当前时间']\").removeAttr('readonly');" \
     "$(\"input[placeholder='开始时间≥当前时间']\").attr('value','{0}')".format(content)
  driver.execute_script(js)
#关于时间控件 如果需要对时间控件进行操作，我们需要用JS解除时间控件的只读属性 然后进行操作。所有input的标签 所要填写的内容都是在value里面
def endTime(driver,content):
  '''结束时间控件'''
  js="$(\"input[placeholder='结束时间>开始时间']\").removeAttr('readonly');" \
     "$(\"input[placeholder='结束时间>开始时间']\").attr('value','{0}')".format(content)
  driver.execute_script(js)

driver=webdriver.Chrome()
driver.maximize_window()
driver.get('file:///C:/Users/jiachao8/Desktop/time/Time/index.html')
driver.implicitly_wait(30)
startTime(driver=driver,content='2020-12-06 00:00:00')
t.sleep(5)
endTime(driver=driver,content='2021-12-06 10:00:00')
t.sleep(5)
driver.quit()