web-selenium自动化八大定位方式

web-selenium八大定位方式

以下对selenium定位的8中方式一一做以说明，如有写的不合理的地方，请各位大佬多多指点

通过id定位

1. 通过id定位，通常在html元素中存在id属性值才能通过id值进行定位，一般一个html页面，id值是唯一的，通过id定位元素不会有重复的情况出现
2. 定位方法：find_element_by_id、find_element(“id”,"")

通过name定位

1. 通过name定位，通常在html元素中存在name属性值才能通过name值进行定位
2. 定位的方法：find_element_by_name()、find_element(name,"")

通过class_name定位

1. 通过class_name定位，通常在html元素中存在class_name属性值才能通过class_name值进行定位
2. 定位的方法：find_element_by_class_name()、find_element(class_name,"")

通过xpath定位

1. **通过xpath定位，是通过定位元素路径进行，一般通过相对路径进行定位元素** 
2. 语法：//元素标签[@属性名=‘属性值’]
3. .表示当前节点
4. ..表示选取当前节点的父节点
5. and组合属性查询元素
6. text()通过文本查询元素，一般和contains结合使用
7. contains是一个函数，经常结合text使用：//标签[contains（text(),"文本"）]
8. []通过索引查找，一般要将索引前面整体加(),索引是从1开始的
9. //div/input “/”表示通过父亲找儿子
10.“//”表示祖先找子孙
11“*”表示任意的标签名，如：//*[@属性名=属性值]
12“/一般表示绝对路径”

xpath的应用
#条件组合定位选择框：
//input[@class="el-input__inner" and @type="text"]

#使用..定位子元素的父节点
//input[@class="el-input__inner" and @type="text"]/..

#使用text()和contains定位文本元素
//a[contains(text(),"工具")]

#使用contains定位标签元素
//input[contains(@class,"txt1")]

#定位到多个元素时，使用索引[]进行舍去
(//input[contains(@class,"txt1")])[2]

#使用/通过父亲找儿子
//div[@class="input-box"]/input[@class="txt1" and @type="text"]

#使用//通过祖父找子孙
//div[@class="send-box"]//input[@class="txt1"]

#使用*通配符表示任意标签定位元素
//*[@class="send-box"]//*[@class="txt1"]

通过css_selector定位

  1. **css是一种标记语言，在css标记语言中，定位元素要使用css选择器**
  2. 定位方法：find_element_by_css_selector()
  3. 常用的定位方法
     ①id选择器：使用#id
     ②class选择器 ： .class属性值
     ③属性选择器：[属性名=属性值]
     ④ 元素选择器：标签名
     ⑤ 层级选择器：使用>或者空格表示
         >与空格的区别：大于号表示的表示的必须为子元素（必须是儿子），空格表示的是可以隔代定位元素

通过link_text()定位

一般是定位文本，方法：find_element_link_text()
还有一种就是通过局部文本定位：find_element_7.Partial_link_text()
## xpath和css选择器的区别

1. **css写法更加的简洁**
2. css查找元素更快
3. xpath功能强大，能够支持contains()函数
4. css不支持text()文本
5. xpath对于复杂的定位反而简单

轴运算

 1. **是通过查找元素和元素之间的元素来定位元素**
 2. 语法：标签//轴名称::元素

常见的轴名称：

以上常用到的是following_sibilng(找一个元素的弟弟)，preceding_sibling(找一个元素的哥哥)
ancestor（找元素的父亲或者祖先）
child(定位当前元素的子元素)
descendant（定位当前元素的后代元素）
轴运算的应用：

#ancestor通过当前节点查找父节点或者祖父节点
//*[@class="txt1"]//ancestor::*[@class="send-box"]

#following-sibling找同级弟弟节点
//*[@class="annex-box"]//following-sibling::div

#preceding-sibling找同级哥哥节点
//*[@class="annex-box"]//following-sibling::div//preceding-sibling::div

#child找子级元素
(//div[@class="el-input el-input--suffix"]//child::input)[1]
#使用descendant定位当前元素节点和后代元素
//div[@class="el-form-item__content"]//descendant::input

chrom定位元素插件

chropath，下载地址：https://www.crx4chrome.com/crx/50476/
安装后，可以在浏览器中看到该插件