【某机构vip教程】Selenium(7)：元素定位_css_selecto定位

男娘i 2024-04-26 03:47 87阅读 0赞

## **Css\_selector是什么** ##

CSS是一个被用来描述如何在屏幕等处渲染HTML和XML文档的语言。CSS使用选择器来为文档中的元素绑定样式属性。

选择器（selector）是用来在树中匹配元素的模式，选择器对HTML和XML进行了优化，被设计用来在注重性能的代码中执行。Selenium官网的Document里极力推荐使用Css\_selector，而不是XPath来定位元素。

### **Css\_selector常用如下6种定位元素的方法（不支持文本定位）** ###

![7b3aa7e2952ea4eb2261d109f39662b3.png][]

####  **1、通过绝对路径定位** ####

绝对路径是从网页的根节点html开始，逐层去查找需要定位的元素。

此方法缺点显而易见，当页面元素位置发生改变时，都需要修改，因此，并不推荐使用。

代码如下：

以百度首页搜索框为例

![复制代码][6f53736c24911f8a9dae72021f9c75fe.gif]

![复制代码][2d61400ef9ce3ded1c61d30cd61aabd4.gif]

**备注：**当同一层次有多个相同的元素时，使用id或class区分，遇到id用\#号，遇到class用.号

#### **2、通过相对路径定位** ####

相对路径表示文件中所有符合模式的元素都会被选出来，即使是处于树中不同的层级也会被选出来。

代码如下：

以百度首页搜索框为例

![复制代码][d29f138cf62bfe4a34e34dc93f8bebdf.gif]

![复制代码][13a97ceeb579c20cae1e3f9cc8111c0c.gif]

**备注：**以上都可以定位到百度搜索框，相对路径的长度和开始位置并不受限制，可以采用从后往前逐层定位直到定位到即可的方式去定位。

#### **3、使用元素属性定位** ####

元素属性定位要求属性能够定位到唯一一个元素，如果存在多个相同条件的标签，默认定位第一个；

具体格式：标签名\[属性="属性值"\]

支持使用多个属性一起定位元素：标签名\[属性1="属性值1"\]\[属性2="属性值2"\]

代码如下：

以百度首页搜索框为例

![复制代码][dcc07042a8314a3906db40af8fa36a27.gif]

![复制代码][37a27d4c3e4712d2c71c784899231447.gif]

#### **4、使用部分属性值匹配（也称为模糊方法定位）** ####

属性值如果太长或网页中的元素属性动态变化，可以使用此方法

元素属性值比对字符串开头：^=

元素属性值比对字符串结尾：$=

元素属性值比对字符串包含：\*=

代码如下：

以百度首页的链接为例

![复制代码][d6b93bf345bf8e70438da1a72e08cff5.gif]

![复制代码][80db07844ef7b443e6c3395d86666fb5.gif]

#### **5、查询子元素** ####

1）子元素 A>B  
driver.find\_element(By.CSS\_SELECTOR,'form>span>input')

2）后代元素 A空格B（类似>）  
driver.find\_element(By.CSS\_SELECTOR,'form span input')

3）第一个后代元素:first-child  
driver.find\_element(By.CSS\_SELECTOR,'form input:first-child')

4）最后一个后代元素:last-child  
driver.find\_element(By.CSS\_SELECTOR,'form input:last-child')

5）第n个子元素:nth-child(N)\[类同:nth-of-type(N)\]  
driver.find\_element(By.CSS\_SELECTOR,'form input:nth-child(5)')

driver.find\_element(By.CSS\_SELECTOR,'form input:nth-of-type(15)')

代码如下：

以百度首页为例

![复制代码][d29f138cf62bfe4a34e34dc93f8bebdf.gif]

import os
    from selenium import webdriver
    from selenium.webdriver.common.by import By
    
    current_path = os.path.dirname(os.path.abspath(__file__))  # 当前路径
    driver_path = os.path.join(current_path,'../webdriver/chromedriver.exe')  # driver路径
    driver = webdriver.Chrome(executable_path=driver_path)  # Firefox,Ie等
    
    driver.get('https://www.baidu.com/')  # 打开网站
    # 查询子元素
    # >表示子元素
    driver.find_element(By.CSS_SELECTOR,'form>span>input').send_keys('python')
    # 空格表示后代元素(类似>)
    driver.find_element(By.CSS_SELECTOR,'form span input').send_keys('python')
    # 第一个后代元素 :first-child
    a = driver.find_element(By.CSS_SELECTOR,'form  input:first-child').get_attribute('name')
    print( a )  # ie
    # 最后一个后代元素 :last-child   如果是儿子/孙子都存在，是孙子在最后面一个
    b = driver.find_element(By.CSS_SELECTOR,'form  input:last-child').get_attribute('value')
    print( b )  # 百度一下
    # 第N个子元素  :nth-child(N)等同于:nth-of-type(N)
    c = driver.find_element(By.CSS_SELECTOR,'form input:nth-child(5)').get_attribute('name')
    d = driver.find_element(By.CSS_SELECTOR,'form input:nth-of-type(15)').get_attribute('name')
    print( c )    # ch
    print( d )    # rsv_dl

![复制代码][b1390bc7c052699a3f24d638d59cbb33.gif]

#### 6、查询兄弟元素 ####

1）同层级下一个元素 +  
driver.find\_element(By.CSS\_SELECTOR,'div\#s-top-left a')  
driver.find\_element(By.CSS\_SELECTOR,'div\#s-top-left a+a+a')

2）选择同层级多个相同标签的元素 ~  
driver.find\_elements(By.CSS\_SELECTOR,'div\#s-top-left a~a')

代码如下：

以百度首页为例

![复制代码][7a0dfa0c3f5548ca1587c49acbe39c10.gif]

### 总结 ###

#### 如果你对此文有任何疑问，如果你也需要接口项目实战，如果你对软件测试、接口测试、自动化测试、面试经验交流感兴趣欢迎加入我们，加入方式在文章的最后面 ####

> ### 自动化测试相关教程推荐： ###
> 
> ### [2023最新自动化测试自学教程新手小白26天入门最详细教程,目前已有300多人通过学习这套教程入职大厂！！\_哔哩哔哩\_bilibili][2023_26_300_bilibili] ###
> 
> ### [2023最新合集Python自动化测试开发框架【全栈/实战/教程】合集精华，学完年薪40W+\_哔哩哔哩\_bilibili][2023_Python_40W_bilibili] ###
> 
> ### 测试开发相关教程推荐 ###
> 
> ### [2023全网最牛，字节测试开发大佬现场教学，从零开始教你成为年薪百万的测试开发工程师\_哔哩哔哩\_bilibili][2023_bilibili] ###
> 
> ### postman/jmeter/fiddler测试工具类教程推荐 ###
> 
> ### [讲的最详细JMeter接口测试/接口自动化测试项目实战合集教程，学jmeter接口测试一套教程就够了！！\_哔哩哔哩\_bilibili][JMeter_jmeter_bilibili] ###
> 
> ### [2023自学fiddler抓包，请一定要看完【如何1天学会fiddler抓包】的全网最详细视频教程！！\_哔哩哔哩\_bilibili][2023_fiddler_1_fiddler_bilibili] ###
> 
> ### [2023全网封神，B站讲的最详细的Postman接口测试实战教学，小白都能学会\_哔哩哔哩\_bilibili][2023_B_Postman_bilibili] ###

## 总结： ##

## 光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。 ##

![b9be6789bcc94f18bc150950a3835330.jpeg][]

![12dd047d61854689ac9b4836fc4f7f5a.jpeg][]

**如果对你有帮助的话，点个赞收个藏，给作者一个鼓励。也方便你下次能够快速查找。**

**如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步**

**在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。**

**我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，**

**测试开发视频教程、学习笔记领取传送门！！**

![514150b5607a48979666fa391dc76077.gif][]

[7b3aa7e2952ea4eb2261d109f39662b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4180abb8d7944a208ef3934950f76831.png
[6f53736c24911f8a9dae72021f9c75fe.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/113ddf1314814f49922b254c69862dce.gif
[2d61400ef9ce3ded1c61d30cd61aabd4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6d28dff0789f4120863f22af5a8443de.gif
[d29f138cf62bfe4a34e34dc93f8bebdf.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/343ca3b451274051aa820adaca4cab36.gif
[13a97ceeb579c20cae1e3f9cc8111c0c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d4e905a945864a63ac9ef473a6558863.gif
[dcc07042a8314a3906db40af8fa36a27.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/def33a8fae3c44ec9d3a3222bf6a2b2b.gif
[37a27d4c3e4712d2c71c784899231447.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f9c2cb4b2df8496f896ece28320c619e.gif
[d6b93bf345bf8e70438da1a72e08cff5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/97bf932371274288b0fa865cd5eabccc.gif
[80db07844ef7b443e6c3395d86666fb5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/724ae3c62ee04cc4b6a8e7f9edd20211.gif
[b1390bc7c052699a3f24d638d59cbb33.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c0368da2f8e9454698f07f951be3266a.gif
[7a0dfa0c3f5548ca1587c49acbe39c10.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/30b7ed31e8754031bbde30d2f441e37f.gif
[2023_26_300_bilibili]: https://www.bilibili.com/video/BV17G4y1Z74z/?spm_id_from=333.999.0.0&vd_source=f7b265e48f8139faff684d5069fdfad7
[2023_Python_40W_bilibili]: https://www.bilibili.com/video/BV1AF411T7qJ/?spm_id_from=333.999.0.0
[2023_bilibili]: https://www.bilibili.com/video/BV1hX4y187wi/?spm_id_from=333.999.0.0&vd_source=f7b265e48f8139faff684d5069fdfad7
[JMeter_jmeter_bilibili]: https://www.bilibili.com/video/BV1e44y1X78S/?spm_id_from=333.999.0.0&vd_source=f7b265e48f8139faff684d5069fdfad7
[2023_fiddler_1_fiddler_bilibili]: https://www.bilibili.com/video/BV1o54y1u7UU/?spm_id_from=333.999.0.0
[2023_B_Postman_bilibili]: https://www.bilibili.com/video/BV16L41117wB/?spm_id_from=333.999.0.0
[b9be6789bcc94f18bc150950a3835330.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/71c01a6d653c435da2bb6207977709bc.jpeg
[12dd047d61854689ac9b4836fc4f7f5a.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/71f9d4ef1dff4192a0520dfaf4e01a47.jpeg
[514150b5607a48979666fa391dc76077.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3d03fa46812640f49c87f6523d082d53.gif