selenium 定位方式3-css_selector
关于页面元素定位,可以根据 id、class、name 属性以及 link_text。
其中 id 属性是最理想的定位方式,class 与 name 属性,有时候也还行。
但是,如果要定位的元素,没有上述的属性,或者通过上述属性找到多个元素,该怎么办?
Selenium 提供了2种可以唯一定位的方式:
find_element_by_css_selector
find_element_by_xpath
find_element_by_css_selector
原理
HTML 中经常要为页面上的元素指定显示效果,比如前景文字颜色是红色,背景颜色是黑色, 字体是微软雅黑,输入框的宽与高等。
以上这一切,都是靠 css
来告诉浏览器:要选择哪些元素, 显示怎样的风格。
如下图,豆瓣上“登陆豆瓣”的按钮,就是 css
告诉浏览器:.account-anonymous .account-form-field-submit .btn
这个按钮,背景颜色是浅绿色,高是34px
等
其中,.account-anonymous .account-form-field-submit .btn
就是 css selector
,也称为 css
选择器。
css selector
语法就是用来选择元素的。
既然 css selector
语法 天生就是浏览器用来选择元素的,Selenium 自然就可以将它运用到自动化中,来定位要操作的元素了。
只要 css selector
的语法是正确的, Selenium 就可以定位到指定的元素。
根据标签(tag)名定位
HTML 中,以下都属于标签:
<a></a>
<div></div>
<h1></h1>
<script></script>
<body></body>
<span></span>
<footer></footer>
<input>
<form></form>
<button></button>
验证与搜索方式:
- 按
F12
打开 开发者工具栏 - 按
Ctrl
键 和 F 键, 显示搜索框
应用:
# find_element_by_css_selector 的应用:根据标签(tag)名定位
from selenium import webdriver # 导入 webdriver 模块driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.get('https://www.douban.com/') # 打开豆瓣
element = driver.find_element_by_css_selector("a") # 根据 a 标签定位元素
print(element.text) # 打印 定位元素 的文本driver.quit() # 关闭浏览器
根据 id 定位
根据 id 属性选择元素的语法是,在 id 前面加上一个 “#” 号: #id值
应用:
# find_element_by_css_selector 的应用:根据 id 定位
from selenium import webdriver # 导入 webdriver 模块
from time import sleep # 导入 sleep 模块,可以使程序强制休眠driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.maximize_window() # 窗口最大化
driver.get('https://www.baidu.com/') # 打开 百度
sleep(2) # 强制休眠 2 秒
element = driver.find_element_by_css_selector("#kw") # 根据 id 定位元素
element.send_keys("自动化测试") # 输入内容
sleep(3) # 强制休眠 3 秒
driver.quit() # 关闭浏览器
根据 class 定位
根据 class 属性选择元素的语法是,在 class 值前面加上一个".": .class值
应用:
# find_element_by_css_selector 的应用:根据 class 定位
from selenium import webdriver # 导入 webdriver 模块
from time import sleep # 导入 sleep 模块,可以使程序强制休眠driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.maximize_window() # 窗口最大化
driver.get('https://www.baidu.com/') # 打开 百度
sleep(2) # 强制休眠 2 秒
element = driver.find_element_by_css_selector(".s-top-login-btn") # 根据 class 定位元素
element.click() # 点击定位元素
sleep(3) # 强制休眠 3 秒driver.quit() # 关闭浏览器
根据子元素与后代元素定位
HTML中, 元素内部可以包含其他元素, 比如 下面的 HTML片段:
<div id='container'><div id='layer1'> <!--layer1 是 container 的直接子元素--><div id='inner11'> <!--inner11 是 layer1 的直接子元素,是 container 的后代元素--><span id='span1'>内层11</span> <!--span1 是 inner11 的直接子元素,是 layer1 与 container 的后代元素--></div><div id='inner12'><span>内层12</span></div></div><div id='layer2'><div id='inner21'><span>内层21</span></div></div>
</div>
子元素
如果 元素2 是 元素1 的 直接子元素, css selector
选择直接子元素的语法是:
/* 一个层级 */
元素1 > 元素2
/* 多个层级 */
元素1 > 元素2 > 元素3 > 元素4
/* layer1 是 container 的直接子元素 */
#container > #layer1
/* inner11 是 layer1 的直接子元素,是 container 的后代元素 */
#layer1 > #inner11
#container > #layer1 > #inner11
/* span1 是 inner11 的直接子元素,是 layer1 与 container 的后代元素 */
#inner11 > #span1
#layer1 > #inner11 > #span1
#container > #layer1 > #inner11 > #span1
实际应用:
# find_element_by_css_selector 的应用:根据 子元素 定位
from selenium import webdriver # 导入 webdriver 模块
from time import sleep # 导入 sleep 模块,可以使程序强制休眠driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.maximize_window() # 窗口最大化
driver.get('https://www.baidu.com/') # 打开 百度
sleep(2) # 强制休眠 2 秒
element = driver.find_element_by_css_selector(".s_ipt_wr > #kw") # 根据 子元素 定位元素
element.send_keys("自动化测试") # 输入内容
sleep(3) # 强制休眠 3 秒driver.quit() # 关闭浏览器
后代元素
如果元素2是元素1的后代元素(后代元素包含子元素), css selector
选择后代元素的语法是:
/* 一个层级 */
元素1 元素2
/* 多个层级 */
元素1 元素2 元素3 元素4
/* layer1 是 container 的直接子元素 */
#container #layer1
/* inner11 是 layer1 的直接子元素,是 container 的后代元素 */
#layer1 #inner11
#container #inner11
/* span1 是 inner11 的直接子元素,是 layer1 与 container 的后代元素 */
#inner11 #span1
#layer1 #span1
#container #span1
实际应用:
# find_element_by_css_selector 的应用:根据 后代元素 定位
from selenium import webdriver # 导入 webdriver 模块
from time import sleep # 导入 sleep 模块,可以使程序强制休眠driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.maximize_window() # 窗口最大化
driver.get('https://www.baidu.com/') # 打开 百度
sleep(2) # 强制休眠 2 秒
element = driver.find_element_by_css_selector("#form #kw") # 根据 后代元素 定位元素
element.send_keys("自动化测试") # 输入内容
sleep(3) # 强制休眠 3 秒
driver.quit() # 关闭浏览器
根据属性定位
在 HTML 中,id
与 class
是常用的属性,当然,一个标签内可以包含多个属性,同时属性名称也可以是自定义的,如下面的 HTML 代码段所示:
<li id="quick-entrance"><a href="https://www.lagou.com/s/subscribe.html" data-lg-webtj-_address_id="1nny" data-lg-webtj-_seq="1" rel="nofollow">职位订阅</a>
</li>
<!--
li 标签含有的属性:id
a 标签含有的属性:href、data-lg-webtj-_address_id、data-lg-webtj-_seq、rel
-->
css selector
支持通过任何属性来选择元素,语法是用一个方括号 []
。
/* li 标签含有的属性:id */
[id="quick-entrance"]
/* 加上标签名限制 */
li[id="quick-entrance"]
/* a 标签含有的属性:href、data-lg-webtj-_address_id、data-lg-webtj-_seq、rel */
a[href="https://www.lagou.com/s/subscribe.html"]
a[data-lg-webtj-_address_id="1nny"]
a[data-lg-webtj-_seq="1"]
a[rel="nofollow"]
另外,css selector
根据属性值定位,还支持模糊匹配:
- 包含关系
*=
:a[href*="lagou.com/s/"]
- 匹配开头
^=
:a[href^="https://www.lagou"]
- 匹配结尾
$=
:a[href$="lagou.com/s/subscribe.html"]
如果一个元素具有多个属性,css selector
还可以同时限制多个属性:
a[rel="nofollow"][data-lg-webtj-_seq="1"]
实际应用:
# find_element_by_css_selector 的应用:根据 属性 定位
from selenium import webdriver # 导入 webdriver 模块
from time import sleep # 导入 sleep 模块,可以使程序强制休眠driver = webdriver.Chrome() # 调用 Chrome 浏览器
driver.maximize_window() # 窗口最大化
driver.get('https://www.baidu.com/') # 打开 百度
sleep(2) # 强制休眠 2 秒
element = driver.find_element_by_css_selector("input[id='kw']") # 根据 属性 定位元素
# element = driver.find_element_by_css_selector("input[class='s_ipt']") # 根据 属性 定位元素
# element = driver.find_element_by_css_selector("input[name='wd']") # 根据 属性 定位元素
element.send_keys("自动化测试") # 输入内容
sleep(3) # 强制休眠 3 秒
driver.quit() # 关闭浏览器
联合使用
css selector
支持选择语法的联合使用。如下面的 HTML 代码段:
<div id='bottom'><div class='footer1'><span class='copyright'>版权</span><span class='date'>发布日期:2018-03-03</span></div><div class='footer2'><span>备案号<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a></span></div>
</div>
/*
选择语法联合使用
定位目标:<span class='copyright'>版权</span>
*/
/*第一种方法 标签+class+子元素*/
div.footer1 > span.copyright
/*第二种方法 属性+后代元素*/
div[id='bottom'] span[class='copyright']
/*第三种方法 属性+后代元素*/
#bottom .copyright
.footer1 .copyright
根据次序选择子节点
父元素的第n个子节点
使用 nth-child(n)
,可以指定选择父元素的第几个子节点。
注意:
这里的排序,是所有的子元素一起排序,而不是按标签分类后再排序
下标的开始值是 1
父元素的倒数第n个子节点
使用 nth-last-child(n)
,可以倒过来,选择的是父元素的倒数第几个子节点。
父元素的第几个某类型的子节点
使用 nth-of-type(n)
,可以指定选择的元素是父元素的第几个某类型的子节点。
父元素的倒数第几个某类型的子节点
使用 nth-last-of-type(n)
,可以倒过来, 选择父元素的倒数第几个某类型的子节点。
奇数节点和偶数节点
如果要选择的是父元素的偶数节点,使用 nth-child(even)
如果要选择的是父元素的奇数节点,使用 nth-child(odd)
如果要选择的是父元素的某类型偶数节点,使用 nth-of-type(even)
如果要选择的是父元素的某类型奇数节点,使用 nth-of-type(odd)
根据兄弟节点选择
相邻兄弟节点选择
使用方法:标签类型1 + 标签类型2
,两者为兄弟标签(同级标签),定位到紧跟 标签类型1 后的第1个 标签类型2 的元素,如下图所示:
后续所有兄弟节点选择
使用方法:标签类型1 ~ 标签类型2
,选择 标签类型1 后续兄弟节点中所有的 标签类型2 的元素,如下图所示:
总结
selenium 定位方式3-css_selector相关推荐
- selenium定位方式
一.概念 做UI自动化的重点就是定位元素以及操作元素,关于定位selenium提供了两类十六种方式,即element.elements. 这两类方式的区别是对于元素的定位概念不同,定位方式是相同的. ...
- selenium 定位方式5
Selenium 8大定位方法中的最后一个 find_element_by_tag_name,这是所有定位方式中最不理想的定位方式,主要是因为一个页面中,存在相当多的相同的标签,基本做不到唯一定位,通 ...
- selenium 定位方式4-xpath
Selenium 提供的另一种,能够唯一定位的方式: find_element_by_xpath XPath 基础知识 XPath (XML Path Language) 是由国际标准化组织 W3C ...
- selenium 定位方式1
Selenium 常用的定位方式8种. 1. find_element_by_id 对于 Web 页面,id 是最理想的定位方式,一般前端 HTML 代码都会尽量保证 id 的唯一性. 1.1 fin ...
- selenium 表单提交结果_了解 Selenium 定位方式
※元素定位的重要性:在于查找元素 And 执行元素 定位元素的三种方法 1.定位单个元素:在定位单个元素时,selenium-webdriver 提示了如下一些方法对元素进行定位.在这些定位方式中,优 ...
- selenium 定位方式2
1. find_element_by_link_text 此定位方法只针对 HTML 中的 <a>内容</a> 标签使用,一般会对应一个可跳转的链接,通过 a 标签中的内容定位 ...
- selenium简介,原理,优点,工作过程,定位方式
1.selenium简介 selenium是一个用于web应用程序自动化测试工具,可以直接运行在浏览器,就行用户真正的在浏览器操作一样,支持的浏览器包括:IE,Firefox,Chrome,Safar ...
- 超全面整理,Selenium 八大元素定位方式,(建议收藏反复使用)
UI自动化测本质无非就是: 定位元素 -> 操作元素 -> 模拟页面动作 -> 断言结果 -> 生成测试报告. 所以我们做UI自动化的第一步就是定位元素,如果连元素都定位不到就 ...
- selenium常用定位方式
Selenium 是一个Web应用程序的自动化测试工具.使用javaScript内核语言编写,几乎支持所有能运行javaScript的浏览器(包括IE(7, 8, 9, 10, 11),Mozilla ...
最新文章
- linux 6.6 最新 gblic,Centos6 升级glibc-2.17,解决Requires: libc.so.6(GLIBC_2.14)(64bit)错误解决方法(推荐)...
- 用python实现自动填数生成表格v1.0
- arcgis 卸载和注册表相关总结
- oracle数据库sql培训,Oracle数据库SQL语言实战培训教程(全面、详细、案例、精讲)套餐...
- 腾讯安全Blade团队亮相CanSecWest峰会
- mysql blob 好处_MySQL中的BLOB类型
- 前端工程师技能之photoshop巧用系列第一篇——准备篇
- PostgreSQL 10 高可用 本地SSD盘 版本发布
- carto笔记--- 传感器数据走向
- 雅虎网站页面性能优化的34条黄金守则
- matlab分析电梯,一种基于Matlab/Simulink的电梯驱动系统建模方法
- linux 中cat用法
- HTML中字体相关单位
- 数据挖掘与机器学习——数据挖掘概述
- 网格边缘试探--服务网格的探索与实践
- 全国省市区建表sql
- 【电子器件笔记6】三极管(BJT)参数和选型
- 程序员必修内功,收集了上千本各类编程书籍【免费获取】
- ubuntu 安装MySQL8
- 韩立刚老师《计算机网络》笔记4
热门文章
- Spring Boot学习总结(19)——使用Redisson实现分布式锁
- 消息中间件学习总结(16)——17 个方面,综合对比 Kafka、RabbitMQ、RocketMQ、ActiveMQ 四个分布式消息队列
- 高并发分布式系统中生成全局唯一Id汇总
- Windows学习总结(5)——【IIS建站】Windows10怎么打开站点服务?
- 基 于 svm 的 图 像 分 类_CeO2和MgO助烧剂对矾土基莫来石合成料烧结的影响
- PLSQL Developer中test window的使用
- easyUI自带的时间插件日期选择、月份选择、时间选择的使用(转)
- WAMP的多站点配置
- Android性能优化典范第一季
- 集线器,路由器,交换机的作用和区别是什么?如何区分交换机,集线器,路由器?...