Selenium 详解CSS定位
xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对xpath来说,具有语法简单,定位速度快等优点
一、属性定位
1、可以通过元素的id,class,tag标签这三个属性直接定位
- # 表示id属性,如:#kw
- . 表示class属性,如:.s_ipt
- 直接用标签名称,如:input
代码:
# coding = utf-8 from time import sleep from selenium import webdriver# 驱动文件路径 driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe' # 启动浏览器 driver = webdriver.Chrome(executable_path=driverfile_path) # 打开百度首页 driver.get(r'https://www.baidu.com/') # 用CSS通过id属性定位百度搜索框 # driver.find_element_by_css_selector("#kw").send_keys("selenium")# 用CSS通过clas属性定位百度搜索框 # driver.find_element_by_css_selector(".s_ipt").send_keys("selenium")# 用CSS通过标签属性定位百度搜索框,此处必报错 driver.find_element_by_css_selector("input").send_keys("selenium")# 等待5秒 sleep(5) # 退出 driver.quit()
2、其它属性定位
通过其它属性定位时,直接写属性名和属性值
代码:
# coding = utf-8 from time import sleep from selenium import webdriver# 驱动文件路径 driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe' # 启动浏览器 driver = webdriver.Chrome(executable_path=driverfile_path) # 打开百度首页 driver.get(r'https://www.baidu.com/') # 用CSS通过name属性定位百度搜索框 # driver.find_element_by_css_selector("[name='wd']").send_keys("selenium")# 用CSS通过maxlength属性定位百度搜索框 # driver.find_element_by_css_selector("[maxlength='255']").send_keys("selenium")# 用CSS通过autocomplete属性定位百度搜索框 driver.find_element_by_css_selector("[autocomplete='off']").send_keys("selenium")# 等待5秒 sleep(5) # 退出 driver.quit()
二、标签和属性组合
代码:
# coding = utf-8 from time import sleep from selenium import webdriver# 驱动文件路径 driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe' # 启动浏览器 driver = webdriver.Chrome(executable_path=driverfile_path) # 打开百度首页 driver.get(r'https://www.baidu.com/') # 用CSS通过标签和id属性组合定位百度搜索框 # driver.find_element_by_css_selector("input#kw").send_keys("selenium")# 用CSS通过标签和class属性组合定位百度搜索框 # driver.find_element_by_css_selector("input.s_ipt").send_keys("selenium")# 用CSS通过标签和name属性组合定位百度搜索框 # driver.find_element_by_css_selector("input[name='wd']").send_keys("selenium")# 用CSS通过标签和autocomplete属性组合定位百度搜索框 driver.find_element_by_css_selector("input[autocomplete='off']").send_keys("selenium")# 等待5秒 sleep(5) # 退出 driver.quit()
三、层级关系
代码:
# coding = utf-8 from time import sleep from selenium import webdriver# 驱动文件路径 driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe' # 启动浏览器 driver = webdriver.Chrome(executable_path=driverfile_path) # 打开百度首页 driver.get(r'https://www.baidu.com/') # 用CSS通过层级关系定位百度搜索框 driver.find_element_by_css_selector("form#form>span>input").send_keys("selenium")# 等待5秒 sleep(5) # 退出 driver.quit()
四、索引
CSS的索引定位与xpath的索引定位有很大不同,我们还以百度首页为例
我们要定位“百度一下”按钮,先定位到“百度一下”元素标签<input>的上级标签<span>,而<span>标签是<form>标签下所有<span>标签的第2个<span>,同时又是<form>标签下的第9个子标签
在xpath定位中这样写的:
driver.find_element_by_xpath("//*[@id='form']/span[2]/input")
但是CSS定位必须这样写
driver.find_element_by_css_selector("form#form>span:nth-child(9)>input")
代码:
# coding = utf-8 from time import sleep from selenium import webdriver# 驱动文件路径 driverfile_path = r'D:\coship\Test_Framework\drivers\chromedriver.exe' # 启动浏览器 driver = webdriver.Chrome(executable_path=driverfile_path) # 打开百度首页 driver.get(r'https://www.baidu.com/') # 用CSS通过索引系定位百度搜索框 driver.find_element_by_css_selector("form#form>span:nth-child(8)>input").send_keys("selenium") # 用CSS通过索引定位"百度一下"按钮 driver.find_element_by_css_selector("form#form>span:nth-child(9)>input").click()# 等待5秒 sleep(5) # 退出 driver.quit()
五、CSS与xpath定位比较
定位方式 | xpath | CSS |
标签 | //input | input |
id | //input[@id='kw'] | input#kw |
class | //input[@class='s_ipt'] | input.s_ipt |
其它属性 | //input[@name='username'] |
input[name=username] input[name^=user](以user开头) input[name$=name](以name结尾) input[name*=erna](包含ernal) |
定位子元素 |
//form[@id='form']/* //form/input |
form#form>* form#form>input |
定位所有后代元素 |
//form//input |
form input |
索引 |
//form/span[2] |
form>span[9] |
根据子元素回溯父元素 | //*[./[@id='su']](定位到父级元素) | |
根据兄弟元素定位 | span.soutu-btn+input |
转载于:https://www.cnblogs.com/eastonliu/p/9090673.html
Selenium 详解CSS定位相关推荐
- css层叠上下文详解,CSS定位(层叠上下文)
前面花大力气介绍了布局,现在讲一讲CSS的定位. 定位是什么? 定位跟布局有啥关系?答案是没有关系,定位是指CSS在立体的角度的堆叠的情况,是垂直于屏幕的. 常常会有一个疑惑,CSS中,我给其中的一个 ...
- [Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解(定位元素、常用方法、键盘鼠标操作)
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
- 详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
- 详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
- inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
- 详解CSS display:inline-block的应用(转)
详解CSS display:inline-block的应用 阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-blo ...
- html css 距离顶部距离,详解CSS line-height和height
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...
最新文章
- python 区域和检索_304. 二维区域和检索(Python)
- Silverlight动态设置WCF服务Endpoint
- 为新手准备的 Codea 着色器(Shader)教程
- WP8.1学习系列(第八章)——透视Pivot设计指南
- react列表元素hover
- Angular form学习笔记
- BeanUtils.getProperty取得集合全部数据
- [知识整理]Linux系统WIFI知识的一些整理
- 老男孩第31期杨海学习Linux决心书
- android之调用webservice实现图片上传
- 深耕金融行业数字化转型,人大金仓数据库自主可控解决方案综述
- el-select默认选中 显示的是id 不是汉字
- 实用分享-MAC修改器(摆脱网络封锁的困扰)
- GPC凝胶色谱理论和应用(一)
- 2020-09-12
- Invocation failed Server returned invalid Response.或java.io.IOException: Server returned invalid Res
- P4 开发实践 — 编程基础
- 微软 奥尔良 游戏服务器,去了新奥尔良,才知道是一个城市,别只知道奥尔良烤翅...
- 手机配件实体店好做不_震惊!手机实体店,你不得不防的套路!
- 携职教育:广东2022年企业人力资源管理师职业技能等级认定计划