从零开始编写Web自动化测试脚本(七)--javascript在自动化中的应用

第一章 Selenium+WebDriver环境搭建
第二章 Selenium定位方式
第三章 元素常用属性
第四章 自动化中的三种等待
第五章 自动化浏览器设置及句柄、窗口切换操作
第六章 鼠标、键盘操作
第七章 javascript在自动化中的应用
第八章 unittest&断言
第九章 ddt数据驱动
第十章 测试框架搭建过程Python+Selenium+BeautifulReport

---

---

一、JavaScript的简介

1、JavaScript 是 Web 的编程语言，是目前最流行的脚本语言，这门语言可用于 HTML 和
web开发
2、JavaScript可以让静态HTML页面上添加一些动态效果
3、JavaScript 是可插入 HTML 页面的编程代码。
4、JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

二、浏览器对象模式BOM

1、浏览器的对象模型

①浏览器对象模型（Browser Object Model (BOM)），允许 JavaScript 与浏览器对话。
②现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的
方法和属性被提到
③主要介绍以下浏览器对象模型的
Windows对象 --窗体
location对象 --页面操作
document对象–页面内的元素操作（定位，点击，输入，滚动条，隐藏元素，元素的属性）
学习参考链接：https://www.w3school.com.cn/js/js_window.asp

2、windows对象

①所有浏览器都支持window对象。它代表浏览器的窗口。
②所有全局 JavaScript 对象，函数和变量自动成为window对象的成员。
③全局变量是window对象的属性。
④全局函数是window对象的方法。
⑤甚至（HTML DOM的）document对象也是window对象属性
⑥Windows对象功能：
获取浏览器窗口的尺寸
操作其他窗口方法：如打开新窗口，关闭窗口等
操作当前窗口，如：获取当前页面的地址，重新加载一个新页面，刷新当前页面等

3、获取窗口尺寸

①获取内部宽高属性：innerHeight，innerWidth单位：px(像素)
内部宽高：是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高
• window.innerHeight-浏览器窗口的内高度（以像素计）
• window.innerWidth-浏览器窗口的内宽度（以像素计）
②获取外部宽高属性：outerHeight，outerWidth 单位：px(像素)
• window.outerHeight-浏览器窗口的外部高度（以像素计）
• window.outerWidth-浏览器窗口的外部宽度（以像素计）
③打开新窗口：window.open(url)
④关闭当前窗口：window.close()

4、selenium执行js语句

driver.execute_script(js) js:就是值js的语句

# -*- coding: utf-8 -*-
# @Time  : 2022/4/29 15:04
# Author : 17050125

from selenium import webdriver
import time

# 实例化浏览器
driver = webdriver.Chrome()
# 打开浏览器
driver.get(url="https://www.baidu.com")
# 浏览器窗口最大化
driver.maximize_window()
# 通过js打开百度新闻
js = 'window.open("https://news.baidu.com")'
# 执行js语句
driver.execute_script(js)
time.sleep(3)
# 获取所有句柄
handles = driver.window_handles
# 切换到js句柄
driver.switch_to.window(handles[-1])
# 关闭当前js窗口
driver.execute_script('window.close()')
time.sleep(3)
driver.quit()

5、Location对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

①Location对象属性

属性	描述
hash	返回一个url的锚部分
host	返回一个url的主机名和端口
hostname	返回一个url的主机名
href	返回完整的url
pathname	返回url路径名
port	返回一个url服务器使用的端口号
protocol	返回一个URL协议
search	返回一个url的查询部分

 window.location 对象可不带 window 前缀书写
--window.location.href 返回当前页面的 href (URL)
--window.location.hostname 返回 web 主机的域名
--window.location.pathname 返回当前页面的路径或文件名
--window.location.protocol 返回使用的 web 协议（http:或https:）
--selenium执行js语句
	• driver.execute_script(js) js:就是值js的语句
	• 要想获得js的返回值，必须在js语句前加上return
	• js_url = "return location.href"
	• baidu_url = driver.execute_script(js_url)

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
time.sleep(3)
#通过执行js，获取当前窗口的url，并打印
print(driver.execute_script("return location.href"))
#通过执行js，获取url域名，并打印
print(driver.execute_script("return location.hostname"))
#通过执行js，获取当前页面路径，并打印
print(driver.execute_script("return location.pathname"))
#通过执行js，获取协议，并打印
print(driver.execute_script("return location.protocol"))
driver.quit()

②Location对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

window.location 对象可不带 window 前缀书写
--location.assign(url) 加载新页面
--location.reload() 重新加载当前页面，刷新
--location.replace(url) 用输入的url替换当前的url

assign与replace的区别：
–location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
–location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，
前后两个页面共用一个窗口，所以是没有后退返回上一页的。

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
time.sleep(3)
# 通过执行js，加载打开新页面，可以回退上一页面
driver.execute_script("return location.assign('https://news.baidu.com')")
time.sleep(3)
# 刷新当前页面
driver.execute_script("return location.reload('https://news.baidu.com')")
time.sleep(3)
# 用输入的网址替换当前的网址，无法回退上一页
driver.execute_script("return location.replace('https://www.baidu.com')")
time.sleep(3)
driver.quit()

三、HTML DOM Document 对象

1、HTML DOM节点

–在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
–文档是一个文档节点。
–所有的HTML元素都是元素节点。
–所有 HTML 属性都是属性节点。
–文本插入到 HTML 元素是文本节点。are text nodes。
–注释是注释节点。

2、Document对象

–当浏览器载入 HTML 文档, 它就会成为 Document 对象。
–Document 对象是 HTML 文档的根节点。
–Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
–提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

3、Document元素定位

属性	描述
document.getElementById	id属性值，唯一的
document.getElementsByClassName	class属性值，定位一组元素，加索引可以获取单个元素
document.getElementsByName	name属性值
document.getElementsByTagName	标签名
document.querySelector	css选择器，对于没有id/name/classname属性，可以使用这个定位元素

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
time.sleep(3)
# 通过id属性值定位，value=是输入文本，再执行js
driver.execute_script("document.getElementById('kw').value='id'")
time.sleep(3)
# 刷新
driver.refresh()
# 通过class属性值定位，value=是输入文本，再执行js
driver.execute_script("document.getElementsByClassName('s_ipt')[0].value='classname'")
time.sleep(3)
driver.refresh()
# 通过name属性值定位，value=是输入文本，再执行js
driver.execute_script("document.getElementsByName('wd')[0].value='name'")
time.sleep(3)
driver.refresh()
# 通过tagname属性值定位，value=是输入文本，再执行js
driver.execute_script("document.getElementsByTagName('input')[7].value='tagname'")
time.sleep(3)
driver.refresh()
# 通过css属性值定位，value=是输入文本，再执行js
driver.execute_script("document.querySelector('#kw').value='css'")
time.sleep(3)
# 点击百度一下按钮元素
driver.execute_script("document.getElementById('su').click()")
time.sleep(3)
driver.quit()

4、Document元素操作

获取元素属性值

属性	描述
document.title	获取页面的标题
document.getElementById(“su”).className	获取元素class属性值
document.querySelector(‘#s-top-left > a:nth-child(1)’).text	获取元素的文本值
document.querySelector(‘#s-top-left > a:nth-child(1)’).textContent	获取元素的文本值

注意：selenium执行js语句，要获取属性值的时候，需要加return!

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
time.sleep(3)
# 通过执行js，获取页面的标题并打印
print(driver.execute_script("return document.title"))
# 通过执行js，获取元素class属性值并打印
print(driver.execute_script("return document.getElementById('su').className"))
# 通过执行js，获取元素元素的文本值并打印
print(driver.execute_script("return document.querySelector('#s-top-left > a:nth-child(1)').text"))
# 通过执行js，获取元素元素的文本值并打印
print(driver.execute_script("return document.querySelector('#s-top-left > a:nth-child(1)').textContent"))
driver.quit()

5、Document控制滚动条

①滚动条：横向滚动条、纵向滚动条
②对于纵向滚动条，我们要获取滚动条的高度；对于横向滚动条则需要获取他的宽度
document.body.scrollHeight 获取对象的滚动高度
document.body.scrollWidth 获取对象的滚动宽度
③滑动滚动条：window.scrollTo(x,y) 方法可把内容滚动到指定的坐标
④滑动到页面底部
左下角：window.scrollTo(0,document.body.scrollHeight)
右下角：window.scrollTo(document.body.scrollWidth,document.body.scrollHeight)
指定位置：window.scrollTo(0,数值)
滑动到指定元素：ele.srollIntoView() --》 true:默认值-与元素顶部对齐，false:与元素底部对齐
document.querySelector(‘h3.c-gap-bottom-small:nth-child(1) > a:nth-child(1)’).scrollIntoView()
document.querySelector(‘h3.c-gap-bottom-small:nth-child(1) > a:nth- child(1)’).scrollIntoView(false)

from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("https://news.baidu.com")
driver.maximize_window()
time.sleep(3)
# js滑动滚动条到底部
driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")
time.sleep(3)
# js滑动滚动条到中间
driver.execute_script("window.scrollTo(0,document.body.scrollHeight/2)")
time.sleep(3)
driver.quit()

随手点赞一次，运气增加一份。