自动化测试CSS元素定位

超、凢脫俗 2024-03-23 18:09 25阅读 0赞

**目录**

1.1 CSS定位

1.1.1 绝对路径定位

1.1.2 相对路径定位

1.1.3 类名定位

1.1.4 属性定位

1.1.4.1 ID属性定位

1.1.4.2 其他属性定位

1.1.4.3 模糊属性定位

1.1.5 子页面元素查找

1.1.6 伪类定位

1.1 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伪类 ###

<table> 
 <tbody> 
 <tr> 
 <td> 选择器 </td> 
 <td> 示例 </td> 
 <td> 示例说明 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-checked.html" title=":checked" rel="nofollow">:checked</a> </td> 
 <td> input:checked </td> 
 <td> 选择所有选中的表单元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/css/cssref/sel-disabled.html" title=":disabled" rel="nofollow">:disabled</a> </td> 
 <td> input:disabled </td> 
 <td> 选择所有禁用的表单元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-empty.html" title=":empty" rel="nofollow">:empty</a> </td> 
 <td> p:empty </td> 
 <td> 选择所有没有子元素的p元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-enable.html" title=":enabled" rel="nofollow">:enabled</a> </td> 
 <td> input:enabled </td> 
 <td> 选择所有启用的表单元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-first-of-type.html" title=":first-of-type" rel="nofollow">:first-of-type</a> </td> 
 <td> p:first-of-type </td> 
 <td> 选择每个父元素是p元素的第一个p子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-in-range.html" title=":in-range" rel="nofollow">:in-range</a> </td> 
 <td> input:in-range </td> 
 <td> 选择元素指定范围内的值 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-invalid.html" title=":invalid" rel="nofollow">:invalid</a> </td> 
 <td> input:invalid </td> 
 <td> 选择所有无效的元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-last-child.html" title=":last-child" rel="nofollow">:last-child</a> </td> 
 <td> p:last-child </td> 
 <td> 选择所有p元素的最后一个子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-last-of-type.html" title=":last-of-type" rel="nofollow">:last-of-type</a> </td> 
 <td> p:last-of-type </td> 
 <td> 选择每个p元素是其母元素的最后一个p元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-not.html" title=":not(selector)" rel="nofollow">:not(selector)</a> </td> 
 <td> :not(p) </td> 
 <td> 选择所有p以外的元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-nth-child.html" title=":nth-child(n)" rel="nofollow">:nth-child(n)</a> </td> 
 <td> p:nth-child(2) </td> 
 <td> 选择所有 p 元素的父元素的第二个子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-nth-last-child.html" title=":nth-last-child(n)" rel="nofollow">:nth-last-child(n)</a> </td> 
 <td> p:nth-last-child(2) </td> 
 <td> 选择所有p元素倒数的第二个子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-nth-last-of-type.html" title=":nth-last-of-type(n)" rel="nofollow">:nth-last-of-type(n)</a> </td> 
 <td> p:nth-last-of-type(2) </td> 
 <td> 选择所有p元素倒数的第二个为p的子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-nth-of-type.html" title=":nth-of-type(n)" rel="nofollow">:nth-of-type(n)</a> </td> 
 <td> p:nth-of-type(2) </td> 
 <td> 选择所有p元素第二个为p的子元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-only-of-type.html" title=":only-of-type" rel="nofollow">:only-of-type</a> </td> 
 <td> p:only-of-type </td> 
 <td> 选择所有仅有一个子元素为p的元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-only-child.html" title=":only-child" rel="nofollow">:only-child</a> </td> 
 <td> p:only-child </td> 
 <td> 选择所有仅有一个子元素的p元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-optional.html" title=":optional" rel="nofollow">:optional</a> </td> 
 <td> input:optional </td> 
 <td> 选择没有"required"的元素属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-out-of-range.html" title=":out-of-range" rel="nofollow">:out-of-range</a> </td> 
 <td> input:out-of-range </td> 
 <td> 选择指定范围以外的值的元素属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-read-only.html" title=":read-only" rel="nofollow">:read-only</a> </td> 
 <td> input:read-only </td> 
 <td> 选择只读属性的元素属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-read-write.html" title=":read-write" rel="nofollow">:read-write</a> </td> 
 <td> input:read-write </td> 
 <td> 选择没有只读属性的元素属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-required.html" title=":required" rel="nofollow">:required</a> </td> 
 <td> input:required </td> 
 <td> 选择有"required"属性指定的元素属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-root.html" title=":root" rel="nofollow">:root</a> </td> 
 <td> root </td> 
 <td> 选择文档的根元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-target.html" title=":target" rel="nofollow">:target</a> </td> 
 <td> #news:target </td> 
 <td> 选择当前活动#news元素(点击URL包含锚的名字) </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-valid.html" title=":valid" rel="nofollow">:valid</a> </td> 
 <td> input:valid </td> 
 <td> 选择所有有效值的属性 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-link.html" title=":link" rel="nofollow">:link</a> </td> 
 <td> a:link </td> 
 <td> 选择所有未访问链接 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-visited.html" title=":visited" rel="nofollow">:visited</a> </td> 
 <td> a:visited </td> 
 <td> 选择所有访问过的链接 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-active.html" title=":active" rel="nofollow">:active</a> </td> 
 <td> a:active </td> 
 <td> 选择正在活动链接 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-hover.html" title=":hover" rel="nofollow">:hover</a> </td> 
 <td> a:hover </td> 
 <td> 把鼠标放在链接上的状态 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-focus.html" title=":focus" rel="nofollow">:focus</a> </td> 
 <td> input:focus </td> 
 <td> 选择元素输入后具有焦点 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-firstletter.html" title=":first-letter" rel="nofollow">:first-letter</a> </td> 
 <td> p:first-letter </td> 
 <td> 选择每个&lt;p&gt; 元素的第一个字母 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-firstline.html" title=":first-line" rel="nofollow">:first-line</a> </td> 
 <td> p:first-line </td> 
 <td> 选择每个&lt;p&gt; 元素的第一行 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-firstchild.html" title=":first-child" rel="nofollow">:first-child</a> </td> 
 <td> p:first-child </td> 
 <td> 选择器匹配属于任意元素的第一个子元素的 &lt;p&gt; 元素 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-before.html" title=":before" rel="nofollow">:before</a> </td> 
 <td> p:before </td> 
 <td> 在每个&lt;p&gt;元素之前插入内容 </td> 
 </tr> 
 <tr> 
 <td> <a href="http://www.runoob.com/cssref/sel-after.html" title=":after" rel="nofollow">:after</a> </td> 
 <td> p:after </td> 
 <td> 在每个&lt;p&gt;元素之后插入内容 </td> 
 </tr> 
 <tr> 
 <td> :lang(language) </td> 
 <td> p:lang(it) </td> 
 <td> 为&lt;p&gt;元素的lang属性选择一个开始值 </td> 
 </tr> 
 </tbody> 
</table>

import os,time  
from selenium import webdriver  
  
driver = webdriver.Chrome()  
driver.get('https://www.baidu.com')  
driver.maximize\_window()  
time.sleep(2)  
  
\#1、绝对路径  
driver.find\_element\_by\_css\_selector('html body div div div+div+div a+a+a').click()  
  
\#2、相对路径  
driver.find\_element\_by\_css\_selector('div div div+div+div a+a+a').click()  
  
\#3、元素属性定位 class用. id用\#  
driver.find\_element\_by\_css\_selector('input\#kw').send\_keys('丸子')  
driver.find\_element\_by\_css\_selector('input.s\_ipt').send\_keys('丸子')  
  
\#单个属性写法  
driver.find\_element\_by\_css\_selector('input\[maxlength="255"\]').send\_keys('丸子')  
\#多属性写法(与xpath不同，没有or用法)  
driver.find\_element\_by\_css\_selector('input\[maxlength="255"\]\[name="wd"\]').send\_keys('丸子')  
  
\#使用部分属性值匹配  
\#以什么开头 ^=  
driver.find\_element\_by\_css\_selector('a\[href^="http://news"\]').click()  
\#以什么结尾$=  
driver.find\_element\_by\_css\_selector('a\[href$="hao123.com"\]').click()  
\#属性值包含 \*=  
driver.find\_element\_by\_css\_selector('a\[href\*="tieba"\]').click()  
  
\#查询子元素 >和空格效果一致  
\#第一个子元素  
driver.find\_element\_by\_css\_selector('div.s-top-left a').click()  
driver.find\_element\_by\_css\_selector('div.s-top-left a:first-child').click()  
\#最后一个元素  
driver.find\_element\_by\_css\_selector('div.s-bottom-layer-content p:last-child').click()  
\#第N个子元素  
driver.find\_element\_by\_css\_selector('div.s-top-left a:nth-child(3)').click()  
  
\#查询兄弟元素  
\#p~p：表示从第二个p元素开始取到末尾  
p\_lable = driver.find\_elements\_by\_css\_selector('div.s-bottom-layer-content p~p')  
print(len(p\_lable))  
for i in p\_lable:  
print(i.text) \#输出每一个p标签的text  
  
\#从第一个取到末尾，先定位到第一个p标签，然后获取每一个p标签的值【报错】  
p\_lable = driver.find\_element\_by\_css\_selector('div.s-bottom-layer-content').find\_elements\_by\_tag\_name('p')  
print(len(p\_lable))  
for i in p\_lable:  
print(i.text) \#输出每一个p标签的text  
  
\#新的定位语法  
from selenium.webdriver.common.by import By  
driver.find\_element(By.NAME,'wd').send\_keys('丸子')  
time.sleep(3)  
driver.quit()

==========

定位一组元素中最后一个:div.result-item.ng-star-inserted:last-child  
或者:div.result-item.ng-star-inserted:nth-last-of-type(1) div:nth-child(2)  
倒数第三个:div.result-item.ng-star-inserted:nth-last-of-type(3) div:nth-child(2)

===========

--------------------

**以下是我收集到的比较好的学习教程资源，虽然不是什么很值钱的东西，如果你刚好需要，可以评论区，留言【777】直接拿走就好了**

![c1653dd19f35495583cef3678b57b6b0.png][]

![775632765b6744fbbecbd8fdd097d1ab.png][]

**各位想获取资料的朋友请****点赞 + 评论 + 收藏****，三连！**

**三连**之后我会在评论区挨个私信发给你们~

[c1653dd19f35495583cef3678b57b6b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/d65811ed88934d1d87c1190aeea3eda4.png
[775632765b6744fbbecbd8fdd097d1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2d137b2e2681400ba60a3fd5618e7371.png