selenium之常见js操作

1、简介

浏览器对象模型（Browser Object Model (BOM)）

允许 JavaScript 与浏览器对话。现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的 方法和属性被提到

主要介绍以下浏览器对象模型的

1. Windows对象 --窗体
2. location对象 --页面操作
3. document对象--页面内的元素操作（定位，点击，输入，滚动条，隐藏元素，元素的属性）

Windows对象包含 location对象和document对象

2、Windows对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性

Windows对象功能：

1. 获取浏览器窗口的尺寸
2. 操作其他窗口方法：如打开新窗口，关闭窗口等
3. 操作当前窗口，如：获取当前页面的地址，重新加载一个新页面，刷新当前页面等

2.1 获取窗口尺寸

// 获取内部宽高属性：innerHeight，innerWidth 单位：px(像素)
// 内部宽高：是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

window.innerHeight // 浏览器窗口的内高度（以像素计）
window.innerWidth // 浏览器窗口的内宽度（以像素计）

// 获取外部宽高属性：outerHeight，outerWidth 单位：px(像素)
window.outerHeight // 浏览器窗口的外部高度（以像素计）
window.outerWidth // 浏览器窗口的外部宽度（以像素计

2.2 操作其他窗口

//window.open(url) - 打开新窗口，并打开指定的url
window.open("https://www.jd.com") //在新窗口打开京东； 

// window.close() - 关闭当前窗口
window.close()  //关闭打开的京东窗口； 

# 案例
from selenium import webdriver

driver = webdriver.Edge()
driver.execute_script("window.close()")  #selenium执行js语句

3、Location对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

window.location.href //获取页面的地址
window.location.hostname //获取主机名
window.location.pathname //获取路径信息
window.location.protocol //获取协议
window.location.assign(url) //新建页面
window.location.reload() //刷新页面
window.location.replace(url) //将现有的页面地址替换掉

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

//window.location 对象可不带 window 前缀书写，以上语句都可以写成：
location.href
...

# 案例
#selenium操作js-code
from selenium import webdriver

driver = webdriver.Edge()
drrver.get("https://www.baidu.com")


# 要想获得js的返回值，必须在js语句前加上return
js_url="return location.href" #通过js，获取当前窗口的url
baidu_url=driver.execute_script(js_url)#selenium执行js语句
print(baidu_url)

#通过js,打开新的页面,https://www.tmall.com
# js1='location. assign("https://www.tmall.com")’
# driver, execute_script(js1)
# time.sleep(1)
# driver.back()
#可以回退到上次打开的页面

# time. sleep(2)

#通过js,替换当前的url,https://www.jd.com
js2='location.replace("https://www.jd.com")'
driver.execute_script(js2)
time.sleep(1)

driver.back()#无法回退到上次打开的页面

time.sleep(2)
driver.quit()

4、Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

4.1 Document元素定位

//查找元素，最常用的查找是根据ID和Tag Name
document.getElementById(id属性值) //--》唯一的
document.getElementsByClassName(class属性值) //--》可以定位一组元素
document.getElementsByClassName(class属性值)[索引值]  // 对一组元素中的单个元素的获取

document.getElementsByName(name属性值)
document.getElementsByTagName(标签名)
document.querySelector(css选择器) --》对于没有id/name/classname属性，可以使用这个定位元素

//对找到的元素执行操作
document.getElementById('su').click() //点击元素
document.getElementById('kw').value='哈哈' //对元素输入文本

/**
注意事项：
1.除了scc selector  是 query 开头 其它都是get开头
2.除了ID是单个寻找模式其它都是复数形式的寻找
**/

# 案例
from selenium import webdriver
import time
driver=webdriver.Chrome ()
#打开百度
driver.get("https://www.baidu.com")
#通过js定位元素，操作元素
# # 1:通过id属性定位元素
# js_id="document.getElementById('kw').value='test’" #value就是输入文本值的操作
# driver.execute_script(js_id)
# # 2:通过class属性定位元素
# js_class="document,getElementsByClassName ('s_ipt')[0].value='python’~
# driver. execute_script(js_class)
# 3:通过name属性定位元素
# js_name="document.getElementsByName('wd')[0].value='华测'"
# driver.execute_script(js_name)
#4:通过tagname定位元素
# js_tagname="document.getElementsBy TagName('input’)[7].value='你好’"
# driver.execute_script(js_tagname)
# 5:通过css选择器定位元素
js_css="document.querySelector('#kw').value='css'"
driver.execute_script(js_css)
#点击操作..click()
driver.execute_script("document.getElementById('su').click()")#对百度按钮进行点击
time.sleep(2)
driver.quit()

4.2 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：
js="return document.getElementById('vip').style.visibility"
res=driver.execute_script(js)

# 案例
from selenium import webdriver
import time
driver=webdriver.Chrome ()
#打开百度
driver.get("https://www.baidu.com")
#通过js定位元素，操作元素
# 1:获取页面标题
title=driver.execute_script('return document. title’ )
print(title)
                            
# 2:获取元素属性值
js_class="return document.getElementById('su').className" #百度按钮的class属性

c=driver.execute_script(js_class)
                            
js_value="return document.getElementById('su').value" #百度按钮的value属性

v=driver.execute_script(js_value)
print(c,v)
time.sleep(2)
driver.quit()

4.3 Document更改元素属性值

 //更改元素属性值
document.getElementById('kw').autocomplete='off' //--常用元素属性修改；百度
document.getElementById('vip').style.visibility='visible' //--设置元素的隐藏属性，是否显示;webtest

document.querySelector('#content > div.j_category.category-con > div.category-inner- con.j_categoryInnerCon.j_categoryTab > div.j_logo.logo-con > img').style.display='none' //--设置元素的隐藏属性；天猫
document.querySelector('#train_date').readOnly=false //--修改元素的只读属性；12306

/**
隐藏的元素：利用javascript更改元素属性值，让元素可见
例如：visibility：hidden(隐藏),visible（显示）
	display : none(隐藏),block（显示）
**/	

# 案例
from selenium import webdriver
import time
driver=webdriver.Chrome ()
# #1:打开http://127.0.0.1:5000/
# driver.get("http://127.0.0.1:5000/")
# #更改visibility属性值,让隐藏的元素显示出来  hidden隐藏，visible显示
# js="document. getElementById('vip').style.visibility-'visible'"
# driver.execute_script(js)

#2:打开https://www.tma1l.com/
# driver.get("https://www.tmall.com/")
# #更改display属性值,让显示的元素隐藏起来 none隐藏，block显示

# js="document, querySelector('#content > div.j_category.category-con>"\
# 		"div. category-inner-con.j_categoryInnerCon. j_categoryTab>"\
#		"div.j_logo.logo-con > img').style. display='none’"
# driver. execute_script(js)

#3:打开https://www.12306.cn/index/
driver.get("https://www.12306.cn/index/")
#更改readonly属性值,让只读变成可写true只读，false可写
js="document.querySelector('#train_date').read0nly=false"
driver.execute_script(js)
time.sleep (1)
#写入文本
driver.find_element_by_css_selector('#train_date').send_keys('abcdefg11-22')
time.sleep(2)
driver.quit()

4.4 Document控制滚动条

为啥使用滚动？

因为如果页面没有完全显示，element如果是在下拉之后才能显示出来，只能先滚动到该元素才能进行click，否则是不能click

滚动条：横向滚动条、纵向滚动条

对于纵向滚动条，我们要获取滚动条的高度；对于横向滚动条则需要获取他的宽度

document.body.scrollHeight  //获取对象的滚动高度
document.body.scrollWidth  //获取对象的滚动宽度

4.4.1 页面型滚动条处理

滑动滚动条 :window.scrollTo(x,y) 方法可把内容滚动到指定的坐标

//滑动到页面底部
window.scrollTo(0,document.body.scrollHeight) //1. 左下角：

window.scrollTo(document.body.scrollWidth,document.body.scrollHeight) //2. 右下角：

window.scrollTo(0,数值) //3. 指定位置：

// 4. 滑动到指定元素：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 importwebdriver
import time
driver=webdriver.Chrome()
driver.implicitly_wait(10)
driver.maximize_window ()
# 打开百度,输入python，点击百度一下
driver.get("https://www.baidu.com")
driver,find_element_by_id('kw').send_keys('python')
driver.find_element_by_id('su').click()
time.sleep (2)

#js滑动滚动条到最底部
js1="window.scrollTo(0,document.body.scrollHeight)"
driver.execute_script(js1)
time.sleep (1)

#js滑动滚动条到中间
js2="window.scrollTo(0, document. body.scrollHeight/2)"
driver.execute_script(js2)
time.sleep(2)

#js滑动到指定元素位置，第6个链接位置
js6_top="document.querySelector('h3.c-gap-bottom-small:nth-child(1)>a:nth-child(1)').scrollIntoView()" #与元素顶部对齐
js6_buttom="document.querySelector('h3.c-gap-bottom-small:nth-child(1) >a:nth-child(1)').scrollIntoView(false)" #与元素底部对齐
driver.execute_script(js6_buttom)
driver.quit()

4.4.2 非页面类型滚动条的处理

// 前提：先定位到元素
ele.scrollHeight //获取滚动条高度
ele.scrollWidth //获取横向滚动条宽度
ele.scrollTo(x,y) //滑动到指定坐标位置
ele.scrollTop=1000 //控制纵向滚动条位置，距离y轴原点的距离
ele.scrollLeft=1000 // 控制横向滚动条位置，距离x轴原点的距离

# 案例 scroll_demo.html
from selenium import webdriver
import time
driver=webdriver.Chrome
driver.maximize_window()
driver.get('file:///D:/scroll_demo.html')
time.sleep(3)
#滑动纵向滚动条
js="document.getElementsByClassName('scroll')[0].scrollTop=100"
driver.execute_script(js)
time.sleep(2)

#滑动横向滚动条
js2="document,getElementsByClassName('scroll')[0].scrol1Left=100"
driver.execute_script(js2)
time.sleep(2)

#获取滚动条高度
js_height='return document.getElementsByClassName("scroll")[0].scrollHeight'
h=driver.execute_script(js_height)
js_weidht='return document.getElementsByClassName("scroll")[0].scrol1Width'
w=driver.execute_script(js_weidht)
print(h,w)

5、其他

$ 符号是 jQuery 库中的特殊字符，表示 jQuery 对象。因为 jQuery 是广泛使用的 JavaScript 库，所以 $ 符号已经被广泛采用并成为一个行业标准。

这个对象是由 jQuery 函数创建的，它接受一个 CSS 选择器作为参数，返回一个匹配该选择器的 DOM 元素集合。
html页面需引入：

<head> <script src="jquery-1.9.1.min.js"></script> </head>

/**
$("#id属性值"): id选择器，根据id查询标签对象
$("标签名"): 标签名选择器，根据指定的标签名查询标签对象
$(".class属性值"): 类型选择器，可以根据class属性查询标签对象
**/                    

// 相当于document.getElementById(id属性值)；点击id为“sel_city1”的DOM元素
$("#sel_city1").trigger("click")

// document.getElementsByClassName(class属性值);点击class属性值为“confirm-hook”的DOM元素（有多个时默认匹配第一个？）
$(".confirm-hook").trigger("click")

参考：https://blog.csdn.net/Eliauk_Doubling/article/details/131598266

# 点击 归属城市
time.sleep(1)
js_str = '$("#sel_city1").trigger("click")'
driver.execute_script(js_str)

# 点击 确定
time.sleep(1)
js_str1 = '$(".confirm-hook").trigger("click")'
driver.execute_script(js_str1)