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

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，便于练习，源码给到各位：

人们常说，犹豫一万次，不如实践一次。一个人越犹豫不决，就越容易患得患失.

西雨斜风作小寒，淡烟疏柳媚晴滩.

入淮清洛渐漫漫，雪沫乳花浮午盏。

蓼茸蒿笋试春盘，人间有味是清欢

个人微信号qing_an_an

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）

r(getComputedStyle(o)[“border-top-width”]);

}

return allY;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数同学面临毕业设计项目选题时，很多人都会感到无从下手，尤其是对于计算机专业的学生来说，选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结，更是展示自己能力的重要机会。

因此收集整理了一份《2024年计算机毕业设计项目大全》，初衷也很简单，就是希望能够帮助提高效率，同时减轻大家的负担。
[外链图片转存中…(img-Isfg3g4r-1712578295979)]
[外链图片转存中…(img-TRNwPNzM-1712578295980)]
[外链图片转存中…(img-FWyJfHlI-1712578295980)]

既有Java、Web、PHP、也有C、小程序、Python等项目供你选择，真正体系化！

由于项目比较多，这里只是将部分目录截图出来，每个节点里面都包含素材文档、项目源码、讲解视频

如果你觉得这些内容对你有帮助，可以添加VX：vip1024c （备注项目大全获取）
[外链图片转存中…(img-2KZQaXtB-1712578295980)]