selenium 元素定位总结篇

Bertha 。 2024-04-24 14:47 8阅读 0赞

### 一、By类单一属性定位 ###

<table> 
 <thead> 
  <tr> 
   <th>元素名称</th> 
   <th>描述</th> 
   <th>Webdriver API</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id</td> 
   <td>id属性</td> 
   <td><code>driver.find_element(By.ID, "id属性值")</code></td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>name属性</td> 
   <td><code>driver.find_element(By.NAME, "name属性值")</code></td> 
  </tr> 
  <tr> 
   <td>class_name</td> 
   <td>class属性</td> 
   <td><code>driver.find_element(By.CLASS_NAME, "class_name属性值")</code></td> 
  </tr> 
  <tr> 
   <td>tag_name</td> 
   <td>标签名</td> 
   <td><code>driver.find_element(By.TAG_NAME, "标签名")</code></td> 
  </tr> 
  <tr> 
   <td>link_text</td> 
   <td>a元素的文本内容-精准匹配</td> 
   <td><code>driver.find_element(By.LINK_TEXT, "超链接全部文本值")</code></td> 
  </tr> 
  <tr> 
   <td>partial_link_text</td> 
   <td>a元素的文本内容-模糊匹配</td> 
   <td><code>driver.find_element(By.PARTIAL_LINK_TEXT, "超链接部分文本值")</code></td> 
  </tr> 
 </tbody> 
</table>

1.  id定位

*  特点：`id`定位 是通过元素的`id`属性来定位元素的；在整个HTML文档中 `id` 属性必须是唯一的。(APP中`id`属性不唯一)
 *  前提：元素有`id`属性
 *  说明：当目标元素存在 `id`属性值时，优先使用 **`id`** 方法定位元素，前提`id`不是动态变化的。

1.  name定位

*  特点：`name`定位是根据元素`name属性`来定位的；在HTML文档中 `name` 的属性值是可以重复的

> 注意：当页面内有多个元素的特征值是相同的时候，定位元素的方法执行时，默认**只会获取第一个符合要求的特征对应的元素。**

> 因此，定位元素时需要尽量保证使用的特征值能够代表目标元素在当前页面的唯一性。

1.  class name 定位

*  特点：`class_name`定位是根据元素`class属性值`来定位元素；HTML通过使用`class`来定义元素的样式，`class`属性值可以有多个。
 *  前提：元素有`class`属性

*  **注意：在使用 `class name` 方法时，如果**\*\*`class`\*\***有多个属性值，只能使用其中的一个。**

比如：`class="panel-body has-table scrollbar-hover"`，只能使用其中一个值`panel-body`或者`has-table`或者`scrollbar-hover`，中间的空格代表间隔符，表示class有多个属性。

1.  tag name 定位

*  特点：`tag_name定位` 是通过\*\*`标签名`\*\*来定位的；HTML本质就是由不同的`tag`组成，每一种标签一般在页面中存在多个，所以不方便进行精确定位，**一般很少使用。**
 *  说明：如果存在多个相同的标签，则返回符合条件的 **第一个标签** 。
 *  由于标签名的重复性过高，一般做精确定位时，都不会选择`tag_name`

1.  link test 定位

*  特点：`link_text定位`是**只针对超链接元素**（`< a>标签</a >`，精确匹配），通过超链接的文本内容来定位元素的(超链接文本必须是唯一，不能有空格)，并且需要输入超链接的**全部文本信息。**
 *  案例：`element = driver.find_elementt("link test", '访问新浪网站')`

1.  **partial link text**定位

*  特点：只针对超链接元素，需要输入超链接的**部分文本信息。**
 *  案例：`element = driver.find_element("partial link text", '访问新浪')`
 *  说明：`partial link text`：a标签通过【模糊匹配】超链接文本，定位元素超链接文本必须是唯一。

### 二、xpath定位表达式汇总 ###

### 2.1 xpath术语 ###

#### 2.1.1 节点 ####

1.  XPath中的节点主要有以下几种类型:
    
     *  元素节点 - 表示XML或HTML中的一个元素(也就是标签)，如`<book>`。
     *  属性节点 - 表示元素的一个属性，如`<book category="computer">`中的`category`属性。
     *  文本节点 - 表示元素或属性中的文本内容,如`<book>Java</book>`中的`Java`。
     *  文档节点 - 表示整个文档，作为文档树的根节点。
     *  命名空间节点 - 表示XML命名空间，通常是文档的子节点。
2.  定位节点的方式:
    
     *  通过路径表达式，如`book`节点：`//book`
     *  通过节点关系，如`parent、child`等
     *  通过顺序关系，如`following-sibling`等

#### 2.1.2 基本值 ####

基本值(Atomic Value)指的是不能再分解的单个值，XML中的一些基本值包括:

*  字符串(String)
 *  整数(Integer)
 *  小数(Decimal)
 *  布尔值(Boolean)
 *  日期时间(Date/Time)

基本值就是XML文档中的终端节点,不再包含子元素。

例如:

`<person> <name>John</name> <age>30</age> </person>`

上述XML中:

*  name和age元素中的"John"和"30"就是基本值
 *  而person不是基本值,因为它还包含子元素

基本值有以下特点:

*  不可再分解为更小单元
 *  没有属性或子元素
 *  包含实际数据

### 2.2 节点关系 ###

#### 2.2.1 **父（Parent）** ####

每个元素以及属性都有一个父。

在下面的例子中，book 元素是 title、author、year 以及 price 元素的父：

`<book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>`

#### 2.2.2 **子（Children）** ####

元素节点可有零个、一个或多个子。

在下面的例子中，title、author、year 以及 price 元素都是 book 元素的子：

`<book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>`

#### 2.2.3 **同胞（Sibling）** ####

拥有相同的父的节点

在下面的例子中，title、author、year 以及 price 元素都是同胞：

`<book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book>`

#### 2.2.4 **先辈（Ancestor）** ####

某节点的父、父的父，等等。

在下面的例子中，title 元素的先辈是 book 元素和 bookstore 元素：

`<bookstore> <book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore>`

#### 2.2.5 **后代（Descendant）** ####

某个节点的子，子的子，等等。

在下面的例子中，bookstore 的后代是 book、title、author、year 以及 price 元素：

`<bookstore> <book> <title>Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> </bookstore>`

### 2.3 xpath定位表达式汇总 ###

![image.png][]

### 三、CSS选择器策略汇总 ###

**基本介绍：**

*  CSS（Cascading Style Sheets）是一种语言，它用来描述HTML元素的显示样式；
 *  在CSS中，选择器是一种模式，用于选择需要添加样式的元素；
 *  在Selenium中也可以使用这种选择器来定位元素。
 *  在Selenium中推荐使用CSS定位(前提得会😂)，因为它比XPath定位速度要快。

![image.png][image.png 1]

### 四、元素定位策略总结 ###

*  如果元素有明确`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`高。
 *  没有最好的，只有最精简的，怎么简单怎么来。

### 五、selenium相关总结脑图大全 ###

![doge][]

![huaji][]

附带捎上一份selenium相关总结脑图

![selenium相关总结.png][selenium_.png]

[image.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/07beaa2222114dec9e014346e732e188.png
[image.png 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/e89d4c30ee9d4e52b7371a3e0f261677.png
[doge]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/9a469cad3d644c289ae3238be4929f1b.png
[huaji]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/197760d1bf1c4550834d7f4e7b219fe0.gif
[selenium_.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/304c8e24cf0044e8a8585644e52014f2.png