selenium自动化测试之元素定位三（css定位）
1.1 CSS定位
1.1.1 绝对路径定位
目标
查找第一个文本为“猜猜看”的a标签
实现
CSS表达式
html>body>div>a[.=”猜猜看”]
python表达式
driver.find_element_by_css_selector(‘html>body>div>a[.=”猜猜看”]’)
1.1.2 相对路径定位
目标
查找第一个文本为“猜猜看”的a标签
实现
CSS表达式
a[.=”猜猜看”]
Python表达式
driver.find_element_by_css_selector(‘a[.=”猜猜看”]’)
1.1.3 类名定位
目标
查找第一个类名为“blogpost-body”的div元素
实现
CSS表达式
div. blogpost-body
python表达式
driver.find_element_by_css_selector(“div. blogpost-body”)
说明
对于复合class，如<input class=”btn btn-lg btn-default” type=”text”>，直接写上所有的class即可，即：driver.find_element_by_css_selector(“input. btn.btn-lg.btn-default”)
标签名不是必须的
1.1.4 属性定位
1.1.4.1 ID属性定位
目标
查找页面中第一个id为“cnblogs_post_body”div元素
实现
CSS表达式
div# cnblogs_post_body
Python表达式
driver.find_element_by_css_selector(“div# cnblogs_post_body”)
1.1.4.2 其他属性定位
其他属性是指除id、class以外的所有属性，如img的src、alt属性，input的type、placeholder等
目标
查找页面中alt属性等于"点我试试呀"的img元素
实现
CSS表达式
img[alt=”点我试试呀”]
Python表达式
driver.find_element_by_css_selector(‘img[alt=”点我试试呀”]’)
说明
如果单独依靠某个属性无法唯一定位元素，则可以写多个属性，如下：
img[alt=”点我试试呀”][src=”/images/bg.jpg”]
driver.find_element_by_css_selector(‘img[alt=”点我试试呀”] [src=”/images/bg.jpg”]’)
1.1.4.3 模糊属性定位
模糊属性定位经常使用的三个正则表达式^、$、*
目标
查找链接地址是“http://www.baidu.com”的a标签
CSS表达式
a[href^=”http://www.baidu”]
a[href$=”baidu.com”]
a[href*=”baidu”]
python表达式
find_element_by_css_selector(‘a[href^=”http://www.baidu”]’)
find_element_by_css_selector(‘a[href^=” a[href$=”baidu.com”]’)
find_element_by_css_selector(‘a[href*=”baidu”]’)
1.1.5 子页面元素查找
目标
查找id为home的div下的class为highlighter-rouge的div
CSS表达式
div#home>div.highlighter-rouge
python表达式
driver.find_element_by_css_selector(“div#home>div.highlighter-rouge”)
1.1.6 伪类定位
目标
查找div#home下的第一个子元素
CSS表达式
div#home :first-child
python表达式
dirver..find_element_by_css_selector(“div#home :first-child”)
附录：
CSS伪类
1.1 CSS伪类
|
选择器 |
示例 |
示例说明 |
|
input:checked |
选择所有选中的表单元素 |
|
|
input:disabled |
选择所有禁用的表单元素 |
|
|
p:empty |
选择所有没有子元素的p元素 |
|
|
input:enabled |
选择所有启用的表单元素 |
|
|
p:first-of-type |
选择每个父元素是p元素的第一个p子元素 |
|
|
input:in-range |
选择元素指定范围内的值 |
|
|
input:invalid |
选择所有无效的元素 |
|
|
p:last-child |
选择所有p元素的最后一个子元素 |
|
|
p:last-of-type |
选择每个p元素是其母元素的最后一个p元素 |
|
|
:not(p) |
选择所有p以外的元素 |
|
|
p:nth-child(2) |
选择所有 p 元素的父元素的第二个子元素 |
|
|
p:nth-last-child(2) |
选择所有p元素倒数的第二个子元素 |
|
|
p:nth-last-of-type(2) |
选择所有p元素倒数的第二个为p的子元素 |
|
|
p:nth-of-type(2) |
选择所有p元素第二个为p的子元素 |
|
|
p:only-of-type |
选择所有仅有一个子元素为p的元素 |
|
|
p:only-child |
选择所有仅有一个子元素的p元素 |
|
|
input:optional |
选择没有"required"的元素属性 |
|
|
input:out-of-range |
选择指定范围以外的值的元素属性 |
|
|
input:read-only |
选择只读属性的元素属性 |
|
|
input:read-write |
选择没有只读属性的元素属性 |
|
|
input:required |
选择有"required"属性指定的元素属性 |
|
|
root |
选择文档的根元素 |
|
|
#news:target |
选择当前活动#news元素(点击URL包含锚的名字) |
|
|
input:valid |
选择所有有效值的属性 |
|
|
a:link |
选择所有未访问链接 |
|
|
a:visited |
选择所有访问过的链接 |
|
|
a:active |
选择正在活动链接 |
|
|
a:hover |
把鼠标放在链接上的状态 |
|
|
input:focus |
选择元素输入后具有焦点 |
|
|
p:first-letter |
选择每个<p> 元素的第一个字母 |
|
|
p:first-line |
选择每个<p> 元素的第一行 |
|
|
p:first-child |
选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
|
|
p:before |
在每个<p>元素之前插入内容 |
|
|
p:after |
在每个<p>元素之后插入内容 |
|
|
:lang(language) |
p:lang(it) |
为<p>元素的lang属性选择一个开始值 |
