转：Selenium之CSS Selector定位详解
CSS selector定位
CSS(Cascading Style Sheets)是一种语言，它被用来描述 HTML 和 XML 文档的样式。
百度输入框：
<input name="wd" id="kw1" style="width: 489px;" type="text" maxLength="100"autocomplete="off" jQuery110203956990375154798="25"/>
“百度一下”按钮
<input class="btn self-btn" id="su1" onmouseout="this.className='btn'"
onmousedown="this.className='btn btn_h'" type="submit" value="百度一下"/>
Type selector
语法： E
语义： E元素
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
#百度输入框 Type selector 定位（ E）
search_ipt = driver.find_element_by_css_selector('input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('su1').click()
time.sleep(3)
driver.quit()
注意：改成火狐驱动运行上述代码，运行不通过
child Combinator selector
语法： E>F
语义： E元素的一个子元素F
driver.find_element_by_css_selector("body>form>a")
ID selector
语法： E#myid
语义： ID值等同myid的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
#百度输入框 ID selector 定位(E#element_id)
search_ipt = driver.find_element_by_css_selector('input#kw1')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('su1').click()
time.sleep(3)
driver.quit()
说明:似乎不加E元素也行driver.find_element_by_css_selector("#kw1")
Attribute selector
语法： E[attribute]
语义：带有一个attribute属性的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
#百度输入框 Attribute selector定位(E[attribute])
search_ipt = driver.find_element_by_css_selector('input[name]')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('su1').click()
time.sleep(3)
driver.quit()
语法： E[attribute="value1"]
语义：带有一个attribute属性，且属性值恰好等于value1的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
#百度输入框 Attribute selector定位(E[attribute])
search_ipt =driver.find_element_by_css_selector('input[name="wd"]')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('su1').click()
time.sleep(3)
driver.quit()
语法： E[attribute~="value1"]
语义：带有一个attribute属性，且属性值是有由多个空格隔开，其中一个值恰好等于value1
的元素E
driver.find_element_by_css_selector("input[class~='btn']")
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
search_ipt =driver.driver.find_element_by_id('kw1')
search_ipt.send_keys(u'授客')
#“百度一下”按钮Attribute selector定位(E[attribute~="value1"])
driver.find_element_by_css_selector('input[class~="btn"]').cli
ck()
time.sleep(3)
driver.quit()
语法： E[attribute^="value1"]
语义： 带有一个attribute属性，且属性值以字符串“ value1”开头的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
search_ipt =driver.driver.find_element_by_id('kw1')
search_ipt.send_keys(u'授客')
#“百度一下”按钮Attribute selector定位(E[attribute^="value1"])
driver.find_element_by_css_selector('input[class^="btn"]').cli
ck()
time.sleep(3)
driver.quit()
语法： E[attribute$="value1"]
语义： 带有一个attribute属性，且属性值恰好以字符串“ value1”结尾的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
search_ipt =driver.driver.find_element_by_id('kw1')
search_ipt.send_keys(u'授客')
#“百度一下”按钮Attribute selector定位(E[attribute$="value1"]))
driver.find_element_by_css_selector('input[class$="btn"]').cli
ck()
time.sleep(3)
driver.quit()
语法： E[attribute*="value1"]
语义： 带有一个attribute属性，且属性值包含字符串“ value1“的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.baidu.com/")
search_ipt =driver.driver.find_element_by_id('kw1')
search_ipt.send_keys(u'授客')
#“百度一下”按钮Attribute selector定位(E[attribute*="value1"])
driver.find_element_by_css_selector('input[class*="btn"]').cli
ck()
time.sleep(3)
driver.quit()
有道搜索按钮：
<input class="s-btn" id="qb" type="submit" value="搜 索"/>
<input class="s-btn" id="qb" type="submit" value="搜 索"/>
语法： E[attribute|="value1"]
语义： 匹配任何属性值以"-"作为分隔符，而且被分割的第一个部分精确等于"value1"的E
元素（也匹配属性只有属性值value1的元素）
示例：
# coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Ie()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("http://www.youdao.com/")
#有道搜索输入框Attribute selector定位(E[attribute|="value1"])
search_ipt =
driver.find_element_by_css_selector('input[class|="s"]')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
Structural pseudo-classes(结构伪类) selector
有道输入框及“ 搜索”按钮
语法： E:nth-child(n)
语义：父元素的第n个子元素： E
注意： 所有主流浏览器均支持类似:nth-child() 选择器，但IE8及更低版本都不支持，其
它主流浏览器，比如火狐支持
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:nth-child(n))
search_ipt
=div_em.find_element_by_css_selector('div:nth-child(2)>form>sp
an>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:nth-last-child(n)
语义：父元素的倒数第n个子元素： E
注意：实际写法类似这样： n=–n+倒数， n=-2n+倒数
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位
(E:nth-last-child(n))
search_ipt
=div_em.find_element_by_css_selector('div:nth-last-child(n-5)>fo
rm>span>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:nth-of-type(n)
语义：父元素的子元素中，与元素E同类型的第n个元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位
(E:nth-of-type(n))
search_ipt
=div_em.find_element_by_css_selector('div:nth-of-type(2)>form>
span>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:nth-last-of-type(n)
语义：父元素的子元素中，与元素E同类型的第n个元素,从倒数算起
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位
(E:nth-last-of-type(n))
search_ipt =div_em.
div_em.find_element_by_css_selector('div:nth-last-of-type(n-1)
>form>span>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:first-child
语义：父元素的第一个子元素： E
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('fm')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:first-child)
search_ipt =div_em.
div_em.find_element_by_css_selector('div:first-child>form>span
>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:last-child
语义：父元素的最后一个子元素： E
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:last-child)
search_ipt =div_em.
div_em.find_element_by_css_selector('div:last-child>form>span>
input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:first-of-type
语义：父元素的父元素的子元素中，第一个类型与E元素相同的子元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('fm')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:first-of-type)
search_ipt =div_em.
div_em.find_element_by_css_selector('form>span:first-of-type>i
nput')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:last-of-type
语义：父元素的父元素的子元素中，最后一个类型与E元素相同的子元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('x')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:last-of-type)
search_ipt =div_em.
div_em.find_element_by_css_selector('div:last-of-type>form>spa
n>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:only-child
语义：父元素唯一的子元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('fm')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:only-child)
search_ipt =div_em.
div_em.find_element_by_css_selector(':only-child>span>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
注意：
div_em.find_element_by_css_selector('form:only-child>span>input')
这样也行
语法： E:only-of-type
语义：父元素子元素中，类型与给定元素E相同的唯一子元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('fm')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:only-of-type)
search_ipt =div_em.
div_em.find_element_by_css_selector('form:only-of-type>span>input')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
语法： E:empty
语义：没有子元素的元素E
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.youdao.com/')
div_em = driver.find_element_by_id('fm')#定位父级元素
#有道输入框structural pseudo-classes selector定位(E:only-of-type)
search_ipt =div_em.
div_em.find_element_by_css_selector('form>span>input:empty')
search_ipt.send_keys(u'授客')
driver.find_element_by_id('qb').click()
time.sleep(3)
driver.quit()
百度页面连接
link pseudo-classes selector
语法： E:link
语义： 还未被访问的超链接元素E
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.baidu.com/')
div_em = driver.find_element_by_id('u1')#定位父级元素
#百度页面，新闻连接link pseudo-classes selector定位(E:link)
news_link =div_em.find_element_by_css_selector('a:link')
news_link.click()
time.sleep(3)
driver.quit()
link pseudo-classes selector
语法： E:visited
语义： 已经访问的超链接元素E
the user action pseudo-classes selector
语法： E:hover
语义： 选择鼠标指针浮动在其上的元素
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.baidu.com/')
div_em = driver.find_element_by_id('u1')#定位父级元素
#百度页面link pseudo-classes selector定位(E:hao123)
hao123_link =div_em.find_element_by_css_selector('a:hover')
hao123_link.click()
time.sleep(3)
driver.quit()
说明： ：打开页面后把鼠标光标移动到对应的连接上方，自动点击对应元素
the user action pseudo-classes selector
语法： E:focus
语义：选择鼠标光标所在输入框元素
示例：
#百度输入框定位user action pseudo-classes selector定位(E:focus)
示例：
#coding= utf-8
from selenium import webdriver
import time
if __name__ == "__main__":
driver = webdriver.Firefox()
driver.implicitly_wait(5)
driver.maximize_window()
driver.get('http://www.baidu.com/')
div_em = driver.find_element_by_id('u1')#定位父级元素
#百度页面link pseudo-classes selector定位(E:focus)
search_ipt =div_em.find_element_by_css_selector('a:focus)
#说明：打开页面后把鼠标点击搜索框，会定位到该输入框
search_ipt.send_keys(u'授客')
driver.find_element_by_id('su1').click()
time.sleep(3)
driver.quit()
UI element states pseudo-classes selector
语法： E:enabled
语义： 选择状态为enabled的元素
语法： E:disabled
语义：选择状态为disabled的元素(通常是灰色，点击无反应的元素)
示例：
#coding= utf-8
from selenium import webdriver
import time
import os
if __name__ == '__main__':
driver = webdriver.Firefox()
file_path = os.path.abspath('disabled.html')
driver.get(file_path)
driver.implicitly_wait(5)
#账户输入框定位UI elementstates pseudo-classes selector定位(E:disabled)
driver.find_element_by_css_selector('body>form>input:disabled').click()
#密码输入框定位UI element states pseudo-classes selector定位(E:enabled)
driver.find_element_by_css_selector('body>form>input:enabled').send
_keys("test")
time.sleep(3)
driver.quit()
注意：
1.记得把disabled.html放到src目录下
2.一次仅定位一个输入框，也就是说前面的已经定位到了某个输入框，那么后面的输入框不
再被定位
语法： E:checked
语义：选择状态为checked的元素(通常是灰色，点击无反应的元素)
示例：
# coding= utf-8
from selenium import webdriver
import time
import os
if __name__ == '__main__':
driver = webdriver.Firefox()
driver.maximize_window()
file_path = os.path.abspath('checked.html')
driver.get(file_path)
time.sleep(2)
#复选框定位element stats pseudo-classes selector定位(E:checked)
driver.find_element_by_css_selector('body>form>input:checked')
.click()
time.sleep(3)
driver.quit()
注意：记得把checked.html放到src目录下
Negation pseudo-selector
语法： E:not(s)
语义：选择与选择器(selector)： s,不匹配的元素E
示例：
# coding= utf-8
from selenium import webdriver
import time
import os
if __name__ == '__main__':
driver = webdriver.Firefox()
driver.maximize_window()
file_path = os.path.abspath('checked.html')
driver.get(file_path)
time.sleep(2)
#百度超链接定位Negation pseudo-class selector定位(E:not(s))
driver.find_element_by_css_selector('body>form>a:not(input)').
click()
time.sleep(3)
driver.quit()
注意：记得把checked.html放到src目录下
driver.find_element_by_css_selector('body>form>a:not(input)')
Descendant combinator selector
语法： E F
语义： E元素的一个派生子元素F(子元素，及子元素的子元素……，即父元素>派生子元素>
派生子子元素……)
示例：
# coding= utf-8
from selenium import webdriver
import time
import os
if __name__ == '__main__':
driver = webdriver.Firefox()
file_path = os.path.abspath('checked.html')
driver.get(file_path)
driver.maximize_window()
time.sleep(3)
#百度超链接定位Descendant combinator定位(E F)
driver.find_element_by_css_selector('body>form a').click()
time.sleep(3)
driver.quit()
注意：
2.记得把checked.html放到src目录下
2.和E>F的区别， E>F 如果F是E元素下的第一个类型与F相同的子元素则不必指定序号，否
则要用类似nth-child(n)之类的指定，而E F不管是否指定序号，都可以，
转：Selenium之CSS Selector定位详解的更多相关文章
- selenium之css selector定位
什么是CSS Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器(49及以下版本)后,下载插件Fire ...
- CSS各种定位详解
1.定位的专业解释 (1)语法 position:static|absolute|fixed|relative (2)说明 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对 ...
- Css选择器定位详解
1.使用 class 属性来定位元素,方法如下: driver.findElement(By.cssSelector("input.login")); 即可以先指定一个 HTML的 ...
- css position定位详解
position:static 默认方式: position:relative 相对定位,相对于原有位置进行移动,并且保留它在文件流中的占位: position:absolute 绝对定位,相对于最近 ...
- selenium：css_selector定位详解（css selector和xpath的比较）
selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) ID NAME CLASS CSS SELECTOR XPATH 推荐的定位方式的优先级 优 ...
- selenium：css_selector定位详解
selenium:css_selector定位详解(css selector和xpath的比较) 来源:https://www.cnblogs.com/haifeima/p/10138154.html ...
- 带你走进CSS定位详解
学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- Selenium 使用css selector (资源来源于网络)
Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...
随机推荐
- 8添加一些样式：开始学习CSS
CSS中简单的表达式,成为规则.一个典型的规则包括一个选择符.若干属性和属性值. 1.在XHTML中直接添加CSS样式,必须在<head>元素里添加样式开始和结束标记.(但这未必是最好的方 ...
- Java构造和解析Json数据的两种方法详解二
在www.json.org上公布了很多JAVA下的json构造和解析工具,其中org.json和json-lib比较简单,两者使用上差不多但还是有些区别.下面接着介绍用org.json构造和解析Jso ...
- jtable更新数据
static JTable table; public void refrushTableData() { String[] columnNames = { " }; String[][] ...
- fatal error C1189: #error : WINDOWS.H already included. MFC apps must not #include <windows.h>
给对话框添加类, 报错 CalibrateMFCDlg.h(6) : error C2504: “CDialog”: 未定义基类 等多个错误 加上 #include "afxwin.h&qu ...
- BLE-NRF51822教程19-Battery Service
Battery Service是有关电池特性方面的服务,如果需要它,在初始化时将它加入到蓝牙协议栈. 如果通过ble_bas_battery_level_update(),电池电量将会通知,Batte ...
- Python基本数据类型之list列表
列表是python中用的非常频繁的数据结构,它是有序序列.之前学的字符串就是一种有序序列.不过列表是可变的. 创建列表 li = list( ) #构 ...
- HIVE中的几种排序
1.order by:全局排序 select * from emp order by sal; 2.sort by:对于每个reduce进行排序 set mapreduce.job.reduces=3 ...
- Unicode与UTF8相互转化（使用MultiByteToWideChar）
1.简述 最近在发送网络请求时遇到了中文字符乱码的问题,在代码中调试字符正常,用抓包工具抓的包中文字符显示正常,就是发送到服务器就显示乱码了,那就要将客户端和服务器设置统一的编码(UTF-8),而我们 ...
- 【Android开发学习笔记】【第三课】Activity和Intent
首先来看一个Activity当中启动另一个Activity,直接上代码说吧: (1)首先要多个Activity,那么首先在res-layout下新建一个 Other.xml,用来充当第二个Activi ...
- Java进制转换
其他转10进制 System.out.println(Integer.parseInt("10", 2));// bin System.out.println(Integer.pa ...