开学了软测的同学快来--详解selenium之JS元素定位--内附JS滚动条源码_slenium js定位

2401_84281594

于 2024-05-09 01:40:16 发布

阅读量707

点赞数 28

分类专栏：程序员文章标签： selenium javascript 测试工具

本文链接：https://blog.csdn.net/2401_84281594/article/details/138591915

版权

程序员专栏收录该内容

183 篇文章 1 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以点击这里获取

2. window.close() - 关闭当前窗口

3. selenium执行js语句 -fox.execute_script(js)

from selenium import webdriver

fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get('https://baidu.com')
# 打开新窗口
js = "window.open('https://www.csdn.net/')"
fox.execute_script(js)
# 关闭新窗口
js_c = 'window.close()'
fox.execute_script(js_c)
fox.quit()

Location对象

location属性

1. window.location.href 返回当前页面的 href (URL)

2. window.location.hostname 返回 web 主机的域名

3. window.location.pathname 返回当前页面的路径或文件名

4. window.location.protocol 返回使用的 web 协议（http: 或 https:）

这里的主机域名可能获取不到，还有就是协议。这里只做了解即可。

from selenium import webdriver

fox = webdriver.Firefox()
# 获取地址
fox.get('https://baidu.com')
js_href = "return location.href"
js_host = "return location.hostname"
js_path = "return location.pathname"
js_port = "return location.protocol"
i = fox.execute_script(js_href, js_host, js_path, js_port)
print(i)
fox.quit()

location方法

1. location.assign(url) 加载新页面

2. location.reload() 重新加载当前页面，刷新

3. location.replace(url) 用输入的url替换当前的url

值得注意的是：

assign与replace的区别：

1. location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

2. location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

这些都是小练手，记得自己上手，提示：不需要得到值的就不需要添加return了，可以直接使用，举例：

from selenium import webdriver

fox = webdriver.Firefox()
fox.implicitly_wait(5)
# 获取地址
fox.get('https://baidu.com')
js = "return location.href"
i = fox.execute_script(js)
print(i)
# 打开一个新的窗口
fox.execute_script("location.assign('https://baidu.com')")

HTML DOM节点

HTML DOM (Document Object Model) 中 , 每一个元素都是节点。

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

元素定位

这里才是重点，JS元素定位其实说的就是Document元素定位。

查找元素，最常用的查找是根据ID和Tag Name ，注意：除id，css选择器以外是元素组定位

1. document.getElementById(id属性值) --》唯一的

2. document.getElementsByClassName(class属性值) --》可以定位一组元素

• document.getElementsByClassName(class属性值)[索引值] 对一组元素中的单个元素的获取

3. document.getElementsByName(name属性值)

4. document.getElementsByTagName(标签名)

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

这里与普通的元素定位没有什么太大的区别，元素组定位索引取值，元素定位。还有就是value与send_keys区别。

from selenium import webdriver

fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get('https://baidu.com')
js_input = "document.getElementById('kw').value='python'"
fox.execute_script(js_input)
jx_click = "document.getElementById('su').click()"
fox.execute_script(jx_click)
fox.quit()

from selenium import webdriver

fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get('https://baidu.com')
js_input = "document.getElementsByClassName('mnav')[0].click()"
fox.execute_script(js_input)
sleep(2)
fox.quit()

这里看到区别了吧，JS中元素定位方式类似，写法还是有一定的区别的。我个人举得还是挺繁琐的。其他的元素定写法与上述类似，这里就不做全部的代码展示了。自行练习！

更改元素属性值

看到这是不是很意外，还能更改元素属性值，JS的特点这里也有份，网页中有部分的属性是隐藏的，有些属性只读不可写让我们具体看看。

1. document.getElementById(‘kw’).autocomplete= ‘off’ --常用元素属性修改；百度

2. document.getElementById(‘vip’).style.visibility= ‘visible’ --设置元素的隐藏属性，是否显示;

隐藏的元素：利用javascript更改元素属性值，让元素可见

例如：visibility：hidden(隐藏),visible（显示）

display : none(隐藏),block（显示）

看这个例子，我们可以通过更改属性值直接隐藏掉这个烦人的东西。

from time import sleep
from selenium import webdriver

fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get('https://www.tmall.com/')
js = "document.querySelector('.j_doodleLink').style.display='none'"
fox.execute_script(js)
sleep(3)
fox.quit()

还可以更改很多东西，比如text值，定位元素后.text=’ '想要修改的值，具体的用法很多很多，对于测试而言，这部分其实也差不多，但是你想技多不压身就去研究研究。

控制滚动条

控制滚动条有什么好处，如果页面没有完全显示，element如果是在下拉之后才能显示出来，只能先滚动到该元素才能进行click，否则是不能click。

对于纵向滚动条，我们要获取滚动条的高度；

对于横向滚动条则需要获取他的宽度

1. document.body.scrollHeight 获取对象的滚动高度

2. document.body.scrollWidth 获取对象的滚动宽度

滑动滚动条：

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

滑动到页面底部：

1. 左下角：window.scrollTo(0,document.body.scrollHeight)

2. 右下角：

window.scrollTo(document.body.scrollWidth,document.body.scrollHeight)

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

4. 滑动到指定元素：ele.srollIntoView() true:与元素顶部对其，false:与元素底部对其 document.querySelector(‘’).scrollIntoView()

document.querySelector(‘’).scrollIntoView(false)

这里直接拿淘宝的例子来跑，先下拉到指定举例，再下拉到最底部：

from selenium import webdriver
from time import sleep

fox = webdriver.Firefox()
fox.get('https://www.taobao.com/')
fox.maximize_window()

# 获取高度
js_height = "return document.body.scrollHeight"
height = fox.execute_script(js_height)
print(height)
# 获取宽度
js_width = "return document.body.scrollWidth"
width = fox.execute_script(js_width)
print(width)
# 下滑1000px
js_left = "window.scrollTo(0,1000)"
fox.execute_script(js_left)
sleep(2)
# 下滑最底部
jx_left_down = "window.scrollTo(0,document.body.scrollHeight)"
fox.execute_script(jx_left_down)
# 下滑到指定元素
# jx_left_zd = "document.querySelector('ul.list > a:nth-child(3) > div:nth-child(1) > div:nth-child(2)').scrollIntoView(false)"
# fox.execute_script(jx_left_zd)

上述是浏览器滚动条。接下来给到各位一个界面元素滚动条。自己写了一个JS，便于练习，源码给到各位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.news{
				width: 600px;
				height: 240px;
				border: 1px solid #333;
				line-height: 160%;
				margin: 50px auto;
				position: relative;
				padding-right: 30px;
				overflow: hidden;
			}
			.news .content{
				position: relative;
				padding: 20px;
			}
			.news .content p{
				margin-bottom: 20px;
			}
			.news .bar{
				width: 20px;
				height: 240px;
				background-color: #eee;
				position: absolute;
				right:10px;
				top: 0;
			}
			.news .bar b{
				position: absolute;
				width: 20px;
				height: 104px;
				top: 0;
				left: 0;
				border-radius: 6px;
				box-shadow: 1px 1px 1px black;

			}
			@-webkit-keyframes faguang{
				0%{
					box-shadow: 0px 0px 0px red;
				}
				 
				100%{
					box-shadow: 0px 0px 20px red;
				}
			}
			@-moz-keyframes faguang{
				0%{
					box-shadow: 0px 0px 0px red;
				}
				 
				100%{
					box-shadow: 0px 0px 20px red;
				}
			}
		</style>
	</head>
	<body>
		<div class="news" id="news">
			<div class="bar">
				<b id="barb"></b>
			</div>
			<div class="content" id="contentBox">
				<p>人们常说，犹豫一万次，不如实践一次。一个人越犹豫不决，就越容易患得患失.</p>
				<p>	西雨斜风作小寒，淡烟疏柳媚晴滩.</p>
				<p>入淮清洛渐漫漫，雪沫乳花浮午盏。</p>
				<p>蓼茸蒿笋试春盘，人间有味是清欢</p>
				<p>个人微信号qing_an_an</p>
			</div>
		</div>
		<script type="text/javascript">
			var barb = document.getElementById("barb");
			var contentBox = document.getElementById("contentBox");
			var news = document.getElementById("news");
			
			var newsJingTop = getAllY(news);
			var contentBoxHeight = parseInt(contentBox.clientHeight);
			var rate = 240 / contentBoxHeight;
			if(rate > 1) {
				box.style.display = "none";
			}
			var barbheight = 240 * rate;
			barb.style.height = barbheight + "px";
			


## 写在最后

**在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84281594

关注

28
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
开学了软测的同学快来--详解selenium之JS元素定位--内附JS滚动条源码_slenium js定位

2. window.close() - 关闭当前窗口3. selenium执行js语句 -fox.execute_script(js)
复制链接

扫一扫