【基于Python的Selenium2自动化测试】12 - 调用JS

文章目录

12.1 JS处理滚动条
12.2 JS处理富文本
12.3 JS处理HTML5的视频播放
12.4 JS处理日历空间

12.4.1 日历控件
12.4.2 去掉readonly属性
12.4.3 采用原生js去掉readonly属性，再输入日期
12.4.4 采用jQuery去掉readonly属性，再输入日期

12.1 JS处理滚动条

说明：WebDriver提供了浏览器的前进和后退相关方法，但是对于浏览器滚动条并没有提供相应的操作方法。在这种情况下，就可以借助JavaScript来控制浏览器的滚动条。

【代码】

from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.get("http://www.baidu.com")

#设置浏览器窗口大小
driver.set_window_size(800,500)

#定位到搜索输入框搜索相关内容
driver.find_element_by_id("kw").send_keys("selenium")
driver.find_element_by_id("su").click()
time.sleep(5)

#通过JavaScript设置浏览器窗口的滚动条位置
js = "window.scrollTo(100,300);"
driver.execute_script(js)
time.sleep(5)
driver.quit()

结果如下：
【基于Python的Selenium2自动化测试】12 - 调用JS

说明：

window.scrollTo(value1，value2) 方法：用于设置浏览器窗口滚动条的水平和垂直位置。value1表示水平的左间距，value2表示垂直的上边距。
execute_script() 方法：用于执行JavaScript代码来移动滚动条的位置。

12.2 JS处理富文本

有如下一个富文本框的页面
【基于Python的Selenium2自动化测试】12 - 调用JS
其源码如下：

<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>text</title>	
	<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
	<div class="row-fluid">
		<div class="span6 well">
		<h3>text</h3>
		<textarea id="id" style="width:98%" cols="50" rows="5" class="txtarea"></textarea>
		<input type="button" value="提交"/>
		</div>
	</div>
</body>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.js"></script>
</html>

操作富文本框的代码如下：

from selenium import webdriver
#引入ActionChains类
from selenium.webdriver.common.action_chains import ActionChains
import time
import os

driver = webdriver.Firefox()
file_path =  'file:///' + os.path.abspath('text.html')
driver.get(file_path)

#设置浏览器窗口大小
driver.set_window_size(800,500)

text = "自动化测试富文本例子"
js = "var sum=document.getElementById('id'); sum.value='" + text + "';"
driver.execute_script(js)
time.sleep(5)
driver.quit()

运行结果：
【基于Python的Selenium2自动化测试】12 - 调用JS

12.3 JS处理HTML5的视频播放

WebDriver支持在指定的浏览器上测试HTML5，另外，我们还可以使用JavaScript来测试这些功能，这样就可以在任何浏览器上测试HTML5了。

大多数浏览器使用空间（如Flash）来播放视频，但是，不同的浏览器需要使用不同的插件。HTML5定义了一个新的元素，制定了一个标准的方式来嵌入电影片段，如下图所示，IE9+、Firefox、Opera、Chrome都支持该元素。
【基于Python的Selenium2自动化测试】12 - 调用JS
Video测试代码：

from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.get("http://videojs.com")

video = driver.find_element_by_xpath("/html/body/section[1]/div[1]/video")

#返回播放文件地址
url = driver.execute_script("return arguments[0].currentSrc;", video)
print("视频播放地址：" + url)

#播放视频
print("开始播放时间: " + time.ctime())
driver.execute_script("return arguments[0].play();", video)

#播放15秒
time.sleep(15)

#暂停播放
print("暂停播放时间：" + time.ctime())
driver.execute_script("return arguments[0].pause();", video)

time.sleep(10)
driver.quit()

运行结果：
【基于Python的Selenium2自动化测试】12 - 调用JS

说明：

arguments 是JavaScript的一个内置对象。其包含了函数调用的参数数组，[0]表示获取对象的第1个值。
currentSrc：返回当前音频/视频的URL。如果未设置音频/视频，则返回空字符串。
load()、play()、pause() 等用于控制视频的加载、播放和暂停。

12.4 JS处理日历空间

本节内容来自博客：Selenium2+python自动化25-js处理日历控件（修改readonly属性）

日历控件是web网站上经常会遇到的一个场景，有些输入框是可以直接输入日期的，有些不能，以我们经常抢票的12306网站为例，详细讲解如何解决日历控件为 readonly 属性的问题。

基本思路：先用js去掉readonly属性，然后直接输入日期文本内容

12.4.1 日历控件

打开12306的车票查询界面，在出发日期输入框无法直接输入时间
常规思路是点开日历控件弹出框，从日历控件上点日期，这样操作比较烦躁，并且我们测试的重点不在日历控件上，只是想输入个时间，做下一步的操作
用firebug查看输入框的属性：readonly=“readonly”，如下：

<input type="text" class="input" value="2018-07-21" id="train_date" readonly>

【基于Python的Selenium2自动化测试】12 - 调用JS

12.4.2 去掉readonly属性

很明显这种元素的属性是 readonly，输入框是无法直接输入的，这时候需要先去掉元素的readonly属性，然后就可以输入啦。
按F12 找到对应元素，直接删除readonly属性，然后回车。
在页面出发日期位置输入：test 试试，嘿嘿，有没发现可以输入成功。当然这里只是为了验证可以输入内容，测试时候还是输入测试的日期。

12.4.3 采用原生js去掉readonly属性，再输入日期

用js去掉元素属性基本思路：先定位到元素，然后用 removeAttribute(“readonly”) 方法删除属性。
出发日元素id为：train_date，对应js代码为：'document.getElementById("train_date").removeAttribute("readonly");'

【代码】

# coding=utf-8
from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.set_window_size(1200,700)
driver.implicitly_wait(10)
driver.get("https://www.12306.cn/index/")
time.sleep(2)

# js去掉日期控件的readonly属性
js = "document.getElementById('train_date').removeAttribute('readonly')"
driver.execute_script(js)

# 清空文本后输入日期
driver.find_element_by_id("train_date").clear()
driver.find_element_by_id("train_date").send_keys("2019-01-25")
time.sleep(10)

运行结果：
【基于Python的Selenium2自动化测试】12 - 调用JS
说明：
1、输入日期前一定要先清空文本框
2、这里输入日期后，会自动弹出日历控件，随便点下其它位置就好了，接下来会用js方法传入日期，就不会弹啦！

【改进】采用js方法输入日期

# coding=utf-8
from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.set_window_size(1200,700)
driver.implicitly_wait(10)
driver.get("https://www.12306.cn/index/")
time.sleep(2)

js = "document.getElementById('train_date').removeAttribute('readonly')"
driver.execute_script(js)
js_value = 'document.getElementById("train_date").value = "2019-01-25"'
driver.execute_script(js_value)

运行结果：
【基于Python的Selenium2自动化测试】12 - 调用JS

12.4.4 采用jQuery去掉readonly属性，再输入日期

上面采用了原生js的方法来去除readonly 属性，我们也可以通过jQuery的方法来去除

【代码】

# coding=utf-8
from selenium import webdriver
import time

driver = webdriver.Firefox()
driver.set_window_size(1200,700)
driver.implicitly_wait(10)
driver.get("https://www.12306.cn/index/")
time.sleep(2)

# 方法1：jQuery，移除readonly属性
js = "$('input[id=train_date]').removeAttr('readonly')"
# 方法2：jQuery，将readonly属性设置为false
#js = "$('input[id=train_date]').attr('readonly',false)"
# 方法3：jQuery，将readonly属性设置为空
# js = "$('input[id=train_date]').attr('readonly','')"
driver.execute_script(js)

js_value = 'document.getElementById("train_date").value = "2019-01-25"'
driver.execute_script(js_value)