Python + Selenium（2.5）- 使用 CssSelector 定位元素

布满荆棘的人生 2023-07-03 10:43 8阅读 0赞

本文转载自：https://www.cnblogs.com/sylvia-liu/p/4469597.html

### 文章目录 ###

*   *   *  CssSelector常用定位
         *   *  1. 根据tagName
             *  2. 根据ID
             *  3. 根据className
             *  4. 根据元素属性
             *  5.查询子元素

Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素，原因是CSS locator比XPath locator速度快，特别是在IE下面（IE没有自己的XPath 解析器(Parser)）他比xpath更高效更准确更易编写，美中不足是根据页面文字时略有缺陷没有xpath直接。

因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式，无论那个元素的位置有多复杂，他们能定位到，那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。

### CssSelector常用定位 ###

#### 1. 根据tagName ####

driver.findElement(By.cssSelector("input")

#### 2. 根据ID ####

driver.findElement(By.cssSelector("input#username"));html标签和#id
    
    driver.findElement(By.cssSelector("#username"));只是#id

#### 3. 根据className ####

单一class：driver.findElement(By.cssSelector(".username"));.class
    
    复合class：driver.findElement(By.cssSelector(".username.**.***"));.classA.classB

#### 4. 根据元素属性 ####

1. 精准匹配：

[A]  driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式
    
    [B]  driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性
    
    [C]  driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性

2. 模糊匹配：（正则表达式匹配属性）

[A]  ^=  driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部 如ctrl_12
    
    [B]  $=  driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl
    
    [C]  *=  driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12

更多正则匹配原则请查看[CSS3 选择器——属性选择器][CSS3]

#### 5.查询子元素 ####

以上代码是百度首页搜索输入框和按钮的html，下面讲解以此为例：

1.  子元素 A>B

WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索输入框

1.  后代元素 A空格B

WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索输入框

1.  第一个后代元素　　:first-child

WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格，定位到form下所有级别的第一个子元素
    
    　　　　　　可定位到三个元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格，定位到form下所有级别的第一个input元素
    
    　　　　　　可定位到两个元素：<input id="kw"..../> <input id="su"........./>

WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格，定位到form直接子元素中的第一个span元素
    
    　　　　　　可定位到一个元素：<span id="s_kw_wrap".../>

4)最后一个子元素 :last-child \[类同:first-child\]

WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格，定位到form下所有级别的第一个子元素

5)第2个子元素 :nth-child(N) \[类同:first-child\]

WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格，定位到form下所有级别的第二个子元素

6.查询兄弟元素

driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b

深入学习cssselector可访问以下地址：[http://www.w3.org/TR/css3-selectors/][http_www.w3.org_TR_css3-selectors]

[CSS3 选择器——基本选择器][CSS3 1]  
[CSS3 选择器——属性选择器][CSS3 2]  
[CSS3 选择器——伪类选择器][CSS3 3]

最后总结一下：  
如果你对此文有任何疑问，如果你也需要接口项目实战，如果你对软件测试、接口测试、自动化测试、面试经验交流感兴趣欢迎加入：软件测试技术群：**593462778**，群里的免费资料都是笔者十多年测试生涯的精华。还有同行大神一起交流技术哦。

作者：暗潮汹涌  
原创不易，欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

[CSS3]: https://www.w3school.com.cn/cssref/css_selectors.ASP
[http_www.w3.org_TR_css3-selectors]: http://www.w3.org/TR/css3-selectors/
[CSS3 1]: http://www.w3cplus.com/css3/basic-selectors
[CSS3 2]: http://www.w3cplus.com/css3/attribute-selectors
[CSS3 3]: http://www.w3cplus.com/css3/pseudo-class-selector