selenium元素定位（三） css定位方法

这一篇介绍一些Css，Css相比与XPath来说，更加复杂点，但是Css定位速度比XPath方法要快，书写更加简单。

对比xpath，css定位字符串要复杂一些，而且xpath可以通过文本定位元素，css没有找到。

Css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS选择器可以较为灵活地选择控件的任意属性，一般情况下，CSS定位速度比XPath定位速度快。

Css选择器详细说明文档：https://www.w3school.com.cn/cssref/css_selectors.asp

Css选择器常用语法举例：https://blog.csdn.net/change__/article/details/105025005

Css选择器常用语法

选择器	例子	例子描述
.class	.intro	选择 class="intro" 的所有元素。
#id	#firstname	选择 id="firstname" 的所有元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内部的所有 <p> 元素。
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。
element~element	ul~p	选择与ul相邻的所有p元素
[attribute]	[target]	选择带有 target 属性所有元素。
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute*=value]	a[href*="w3schools"]	选择其 href 属性值中包含 "w3schools" 子串的每个 <a> 元素。
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]	a[href^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
:checked	input:checked	选择一个选中状态的input按钮
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2) 注：序号从1开始	选择属于其父元素的第二个子元素的每个 <p> 元素。

 

 

 

 

 

 

 

Css实例定位

1、通过Class定位

Class定位通过.来进行表示

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 通过Css中的class定位
driver.find_element_by_css_selector('.s_ipt').send_keys('博客园')

2、通过id定位

Id定位通过#来表示

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 通过id定位，id通过#表示
driver.find_element_by_css_selector('#kw').send_keys('博客园')

3、通过标签名

Css中可以直接通过标签名进行匹配

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 通过标签名定位
driver.find_element_by_css_selector('input')

4、通过属性来定位

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 通过属性定位
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys('博客园')
# 通过name属性定位
# driver.find_element_by_css_selector('[name="wd"]').send_keys('博客园')

5、通过组合形式进行定位

通过父级或者爷爷级别进行定位

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 通过父级组合形式
driver.find_element_by_css_selector('span > input#kw').send_keys('博客园')
# 通过元素形式
# driver.find_element_by_css_selector('input#kw').send)keys('博客园')

6、通过包含元素内容定位

这里比如class中以s_ipt开头的

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 查看已元素内容开头
driver.find_element_by_css_selector("[class^='s_ipt']").send_keys('博客园')

7、 通过以元素结尾内容定位

# coding:utf-8
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('https://www.baidu.com/')
# 查看kw元素结尾定位
driver.find_element_by_css_selector("[id$='kw']").send_keys('博客园')

原文链接：

https://www.cnblogs.com/qican/p/13202501.html