1、css属性定位
css选择器策略 | 示例 | 说明 |
---|---|---|
#id | #telA | 选择id="telA"的所有元素。 |
.class | .telA | 选择 class="telA”的所有元素。 |
[属性名=属性值] | [name=telA] | 除了id和class属性,其他属性的定位格式 |
[attribute] | [target] | 选择带有target 属性所有元素。 |
* | * | 选择所有元素。 |
2、css属性值模糊匹配定位
css选择器策略 | 示例 | 说明 | ||
---|---|---|---|---|
[attribute^=value] | a[src^="https"] | 选择其src 属性值以"https”开头的每个<a>元素。 | ||
[attribute$=value] | a[src$=".pdf"] | 选择其src属性以".pdf“结尾的所有<a>元素。 | ||
[attribute*=value] | a[src*="abc"] | 选择其src 属性中包含“abc"子串的每个<a>元素。 | ||
[attribute~=value] | a[title~=flower] | 定位标签属性title值中有独立flower词汇的节点 | ||
[attribute | =value] | a[lang | =en] | 用于选取带有以指定值开头的属性值的元素。 |
注意:[attribute|=value]
该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="en-us"。
3、css标签定位
css选择器策略 | 示例 | 说明 |
---|---|---|
element | p | 定位所有<p>元素。 |
标签名[属性名=属性值] | input#telA | 定位id属性值为telA的所有<input>元素 |
4、css层级关系定位
css选择器策略 | 示例 | 说明 |
---|---|---|
element,element | div,p | 选择所有 <div> 元素和所有 <p> 元素。 |
element element | div p | 选择 <div> 元素内部的所有 <p> 元素。包括子孙后代。 |
element>element | div>p | 选择父元素为 <div> 元素的所有 <p> 元素。只包括子代。 |
element+element | div+p | 选择紧接在 <div> 元素之后的所有 <p> 元素。同辈元素。 |
示例:
css选择器策略 | 示例 | 说明 |
---|---|---|
需要使用 > 或 空格表示层级关系 | 语法 | |
父标签名[父标签属性名=属性值]>子标签名 | p#p1>input | 定位id属性值为p1的<input>元素 |
父标签名[父标签属性名=属性值] 子标签名 | p#p1 input | 同上 |
5、css索引定位
css选择器策略 | 示例 | 说明 |
---|---|---|
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 |
6、css逻辑运算定位
css选择器策略 | 逻辑定位 | |
---|---|---|
示例 | 标签名[属性名1=属性值1][属性名2=属性值2] | |
示例 | input[type='telA'][placeholder='电话A'] | |
说明 | 同时匹配多个属性 |
7、css元素状态定位
选择器 | 例子 | 例子描述 |
---|---|---|
:empty | p:empty | 选择没有子元素的每个 <p> 元素(包括文本节点)。 |
:target | #news:target | 选择当前活动的 #news 元素。 |
:enabled | input:enabled | 选择每个启用的 <input> 元素。 |
:disabled | input:disabled | 选择每个禁用的 <input> 元素 |
:checked | input:checked | 选择每个被选中的 <input> 元素。 |
:not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 |
七 、总结
- 如果元素有明确
id
,name
,class
属性时,使用对应的基本定位方法。 - 如果没有
id
,name
,class
属性时,或id
,name
,class
属性是动态/不唯一的时候,使用XPath
和css_selector
定位。 - 定位页面超链接使用
link_text
和partial_link_text
定位 - 可使用
XPath
和css_selector
定位的时候,优先使用css_selector
。css_selector
定位的速度和效率比Xpath
高。 - 没有最好的,只有最精简的,怎么简单怎么来。
扩展:为什么css_selector
定位的速度和效率比Xpath
高?
因为你无论用那种方式定位,最终都会转换到css_selector
进行元素定位。
我们可以在PyCharm中,安装ctrl点击对应的方法,进行查看源码,最终都会定位到如下代码:
def find_element(self, by=By.ID, value=None):
"""
Find an element given a By strategy and locator. Prefer the find_element_by_* methods when
possible.
:Usage:
element = driver.find_element(By.ID, 'foo')
:rtype: WebElement
"""
if self.w3c:
if by == By.ID:
by = By.CSS_SELECTOR
value = '[id="%s"]' % value
elif by == By.TAG_NAME:
by = By.CSS_SELECTOR
elif by == By.CLASS_NAME:
by = By.CSS_SELECTOR
value = ".%s" % value
elif by == By.NAME:
by = By.CSS_SELECTOR
value = '[name="%s"]' % value
return self.execute(Command.FIND_ELEMENT, {
'using': by,
'value': value})['value']
最好我这里给你们分享一下我所积累和真理的文档和学习资料有需要是领取就可以了
1、学习思路和方法
这个大纲涵盖了目前市面上企业百分之99的技术,这个大纲很详细的写了你该学习什么内容,企业会用到什么内容。总共十个专题足够你学习
2、想学习却无从下手,该如何学习?
这里我准备了对应上面的每个知识点的学习资料、可以自学神器,已经项目练手。
3、软件测试/自动化测试【全家桶装】学习中的工具、安装包、插件....
4、有了安装包和学习资料,没有项目实战怎么办,我这里都已经准备好了往下看
最后送上一句话:
世界的模样取决于你凝视它的目光,自己的价值取决于你的追求和心态,一切美好的愿望,不在等待中拥有,而是在奋斗中争取。
如果我的博客对你有帮助、如果你喜欢我的文章内容,请 “点赞” “评论” “收藏” 一键三连哦文章来源:https://www.toymoban.com/news/detail-409796.html
文章来源地址https://www.toymoban.com/news/detail-409796.html
到了这里,关于Selenium基础 — CSS选择器定位大全的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!