Selenium 小技巧之JavaScript及H5视频的处理

01 JavaScript的调用

有些页面操作不能依靠WebDriver提供的API来实现，如浏览器滚动条的拖动。这时就需要借助JavaScript脚本。WebDriver提供了execute_script()方法来执行JavaScript代码。

用于调整浏览器滚动条位置的JavaScript代码如下所示：


window.scrollTo(0, 450);

JavaScript代码中用window.scrollTo()方法用于设置浏览器窗口滚动条的水平位置和垂直位置。第一个参数表示水平的左边距，第二个参数表示垂直的上边距。

配合webdriver使用的完整代码如下：

import time
from selenium import webdriver
browser = webdriver.Chrome()
browser.get("https://www.baidu.com")

browser.set_window_size(800, 600)
browser.find_element_by_id("kw").send_keys("python selenium")
browser.find_element_by_id("su").click()
time.sleep(2)

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

执行后的效果如下：

当然，JavaScript的作用不仅仅体现在控制浏览器滚动条的操作上，例如它还可以在页面中textarea文本框中输入内容

文件框的HTML代码示例如下：

<textarea id="id" style="width: 98%" cols="50" rows="5" class= "textarea">
</textarea>

这种情况下，虽然可以通过id定位到元素，但是不能通过send_keys()在文本框中输入文本信息。在这种情况下，可以借助JavaScript代码输入文本信息。

text = "input text"
js = "document.getElementById('id').value='" + text +  "';"
browser.execute_script(js)

这里的思路，首先定义要输入的内容text。然后将text与JavaScript代码通过“+”进行拼接，这样做的目的是为了方便自定义输入的内容。最后只需通过execute_script()执行JavaScript代码即可。

02 HTML5视频的处理

H5，即HTML5的简称，H5技术最近几年非常火爆，主流的浏览器都支持H5，越来越多的网站及应用都在使用H5，最常见使用HTML5的元素有诸如canvas、video等。

大多数浏览器使用插件(如Flash)来播放视频，HTML5定义了一个新的元素<video>，指定了一个标准的方式嵌入视频片段。

WebDriver支持在指定的浏览器上测试HTML5，另外，还可以使用JavaScript测试这些功能，这样就可以在任意浏览器上测试H5了。接下来通过一个例子来了解如何自动化测试<video>，<video>提供了JavaScript接口和多种方法及属性。

import time
from selenium import webdriver
browser = webdriver.Chrome()
browser.get("https://videojs.com/")

video = browser.find_element_by_id("preview-player_html5_api")

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

# 播放视频
print('Start Video')
browser.execute_script("arguments[0].play()", video)

# 播放15s
time.sleep(15)

# 暂停视频
print("Pause video")
browser.execute_script("arguments[0].pause()", video)

time.sleep(2)
browser.quit()