下载掌阅APP，畅读海量书库
立即打开
本节演示JavaScript在自动化测试实战中几种比较常见的实战场景，如处理富文本、处理隐藏元素、处理readonly属性和处理浏览器滚动条等。
先来看一个处理富文本的案例，如图2.30所示。
图2.30 富文本界面
示例如下：
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://localhost:8080")
# 定位富文本，并向富文本输入内容A
js="document.getElementById('content_ifr').contentWindow.document.body.
innerHTML='%s'" %(A)
driver.execute_script(js)
document.getElementById()通过id定位富文本，contentWindow.document.body.innerHTML方法用于向富文本中写入内容。最后通过调用js来执行JavaScript脚本。
在元素定位时，有时存在要定位的元素被隐藏了的情况。所谓元素被隐藏，指的是style= "display:none;"这种情况，如图2.31所示。
图2.31 隐藏元素界面
示例如下：
from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.webdriver.common.by import By
from time import sleep
dr = webdriver.Chrome()
dr.get('file:///E:/webdriver_api_demo/frame.html')
sleep(2)
# 设置元素为可见
js = 'document.querySelectorAll("select")[0].style.display="block";'
dr.execute_script(js)
sleep(3)
element = dr.find_element(By.ID,"s3")
Select(element).select_by_visible_text("po设计模式")
'document.querySelectorAll("select")[0].style.display="block";'表示通过JQuery语法定位被隐藏的Select标签，style.display="block"方法表示设置隐藏的元素为可见。
访问12360车票查询界面时，有时无法在出发日期文本框中输入日期，原因是元素本身有readonly属性存在。处理思路是：首先使用JS语法移除readonly属性，然后向文本框输入日期，如图2.32所示。
图2.32 readonly属性界面（一）
移除readonly属性后，如图2.33所示。
图2.33 readonly属性界面（二）
示例如下：
from selenium import webdriver
from time import sleep
dr = webdriver.Chrome()
dr.get('https://kyfw.12306.cn/otn/leftTicket/init')
sleep(2)
# 移除readonly属性
js1 = "document.getElementById('train_date').removeAttribute('readonly');"
dr.execute_script(js1)
sleep(2)
dr.find_element_by_id('train_date').clear() # 清空日期
dr.find_element_by_id('train_date').send_keys('2018-12-10') # 输入最新日期
如果被操作的元素超过了一定范围，则不能正常定位到元素，需要借助浏览器的滚动条来拖动屏幕，目的是让操作的元素出现在当前的屏幕上。针对这种场景，可以借助JS脚本来实现。WebDriver提供了一个操作JS的方法execute_script()，该方法可以直接定位到JS脚本，示例如下：
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
driver.get("http://www.baidu.com") # 访问百度搜索
driver.find_element_by_id("kw").send_keys("selenium")
driver.find_element_by_id("su").click()
sleep(3)
driver.execute_script("window.scrollTo(0,10000);") # 将页面滚动条拖到底部
sleep(3)
driver.execute_script("window.scrollTo(10000,0);") # 将滚动条移动到页面的顶部
sleep(3)
driver.quit()
window.scrollTo(0,10000)表示以像素为单位，把滚动条滚动到0与10000位置处。其中0表示水平滚动条位置，10000表示垂直滚动条位置。
除上述方法外，还可以引入键盘Keys类下的DOWN、UP方法来实现滚动条向下、向上滚动，示例如下：
from selenium import webdriver
from time import sleep
from selenium.webdriver.common.keys import Keys # 引入键盘类
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("http://www.baidu.com") # 访问百度搜索
driver.find_element_by_id("kw").send_keys("好奇心日报")
driver.find_element_by_id("su").click()
sleep(5)
# 将滚动条移动到页面底部
driver.find_element_by_xpath('//*[@id="page"]/a[10]').send_keys(Keys.DOWN)
sleep(5)
# 将滚动条移动到页面顶部
driver.find_element_by_xpath('//*[@id="s_tab"]/div/a[9]').send_keys(Keys.UP)
sleep(5)
driver.quit()
本案例中('//*[@id="page"]/a[10]')表示百度搜索结果上方的“更多”按钮对应的元素，如图2.34所示。
图2.34 “更多”按钮界面
'//*[@id="s_tab"]/div/a[9]'表示百度搜索结果下方“下一页”按钮对应的元素，如图2.35所示。
图2.35 “下一页”按钮界面
使用Keys类键盘实现滚动条拖动时，只需要指明滚动条滚动的目标位置，即所在屏幕上的任何一个元素就可以。