首页 > 其他分享 >selenium之常见js操作

selenium之常见js操作

时间：2024-04-16 16:01:13浏览次数：18  
标签：execute 元素 selenium 常见 driver js window document

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)

标签：execute,元素,selenium,常见,driver,js,window,document
From： https://www.cnblogs.com/PengHwei/p/18138390

相关文章

  • JS-运算符的优先级
    一、运算符运算符汇总表下面的表格将所有运算符按照优先级的不同从高（19）到低（1）排列。请注意，下表中故意不包含展开语法——原因可以引用 StackOverflow上的一个回答，“展开语法不是一个运算符，因此没有优先级。它是数组字面量和函数调用（和对象字面量）语法的一部分。”优先级......
  • js--参数归一化-日期格式化函数
    //参数归一化///*日期时间格式化date：日期时间isFillZero:是否需要0补位*/functionformate(date,formater,isFillZero=false){formater=_formatNormalize(formater)function_isFillZero(value,length){if(isFillZero){return(value+'').p......
  • [转帖]性能专题：一文搞懂性能测试常见指标
    https://developer.aliyun.com/article/725602 简介： 1.前言上周，对性能测试系列专题，在公号内发表了第一篇介绍：【性能系列连载一】开篇：性能测试不可不知的“干货”，但反响貌似并不太好，但既然此前已答应了部分读者要连载分享性能这块的知识，含着泪也得继续写。1.前言上周......
  • 【THREE.js源码】Geometry和Attribute
    BufferAttributeBufferGeometryInstancedBufferAttributeInstancedBufferGeometryInstancedInterleavedBufferInterleavedBufferInterleavedBufferAttributeTHREE.js中有一个重要的类，Mesh，即网格体对象。这个网格体对象在构造的时候需要传入两个变量，geometry和material，geo......
  • 3.0 常见operators算子
    1.1卷积相关1）卷积2）反卷积（只能做到近似恢复，无法完全恢复原图像） 参考：https://blog.csdn.net/qq_27261889/article/details/863040611.2线性变换相关1）Linear2）矩阵相乘类：【mm:二维矩阵相乘；bmm:三维矩阵相乘；matmul:多维矩阵相乘,只要两个矩阵能够broadcast即......
  • 常见的排序算法——希尔排序
    本文记述了希尔排序的基本思想和一份参考实现代码，并在说明了算法的性能后用随机数据进行了验证。◆思想给定元素之间的间隔h，将所有间隔为h的元素作为独立的待排序范围，可以得到h个这样的子范围。针对每个子范围执行插入排序，使得任意间隔为h的元素是有序的。然后缩小间距......
  • JS混淆工具简介（一）---UglifyJS
    github:https://github.com/mishoo/UglifyJS/工具:https://lisperator.net/uglifyjs/简要介绍  UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台。  UglifyJS通过解析重新生成JS代码的语法树。该工具缩短变量......
  • selenium之浏览器操作和句柄、常见f12操作
    1、获取驱动1.1查看版本号1.2驱动下载下载驱动https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/?form=MA13LH进入页面后选择对应版本下载1.3驱动配置将解压后的浏览器驱动放在python同级目录2、操作浏览器2.1常用操作fromseleniumimpo......
  • fastjson 1.2.24 反序列化导致任意命令执行漏洞复现
    前置知识今天复现了常见的fastjson反序列化漏洞，了解该漏洞需要一些前置的知识，这里总结一下:Fastjsonfastjson是一个Java的库，可以将Java对象转换为Json字符串，也可以将Json字符串转换为Java对象，Fastjson也可以操作一些Java中的对象。JNDIJNDI(JavaNamingandDirectoryInterf......
  • 前端开发框架的选择-Vue.js
    Vue.js秉持简约哲学，通过精炼的代码实现功能——它专注于为Web应用开发提供核心工具，而非让冗余特性成为负担。这种简约设计思路使得代码更加明晰，易于阅读和维护。长远看来，Vue.js的简约特性使得项目运作更为流畅。无论是小型网站还是大型单页应用，Vue.js都能轻松应对——它并非万金......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99