Selenium 详解CSS定位

Stella981
• 阅读 689

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的索引定位有很大不同,我们还以百度首页为例

Selenium  详解CSS定位

我们要定位“百度一下”按钮,先定位到“百度一下”元素标签的上级标签,而标签是

标签下所有标签的第2个,同时又是标签下的第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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
2年前
Python+Selenium练习篇之5
前面介绍了,XPath,id,class,linktext,partiallinktext,tagname,name七大元素定位方法,本文介绍webdriver支持的最后一个方法:by\_css。css和XPath类似,也需要掌握一些语法,才能写出正确的,完整的css选择表达式。相关脚本代码如下:codingu
Stella981 Stella981
2年前
RobotFramework自动化测试之元素定位
前言:最近在做基于RF框架的Web自动化测试,其中涉及到元素的定位,主要用到id、name、xpath、css四中定位方法,尤其后面的两种方法特别有效,可以解决大部分的定位问题。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这