selenium元素定位学习笔记

一，定位原则

• 稳定
• 简单灵活
• 唯一

WebDriver提供了两种方式来定位页面元素，分别是find_element_by_XXX和find_elements_by_XXX。第一种方式的结果是在正常情况下返回一个页面元素的对象，一旦出现异常就会报错。第二种方式的结果是在正常情况下返回页面元素的多个对象，如果没有任何一个DOM元素能匹配，则此返回列表为空。

二，8大元素定位方法

id name classname tagName（前4个是通过CSS Seletor原理） link_text partial_link_text Css xpath

优先使用id,name,classname,tagename唯一定位

• find_elemet_by_id("id属性值")  # 参数少，直观 VS  find_element(by=By.ID, value='kw')
• find_element_by_name("name属性值")
• find_elemnt_by_classname("class属性值")
• find_element_by_tagname("tag标签")
• find_element_by_link_text(" ")
• find_element_by_partial_link_text(" ")
• find_element_by_css_selector()
• find_element_by_xpath()

还有一种是find_element(by=By.ID, value="id")，其实查看find_element_by_id()的源码，可以看到该方法其实是调用find_element()方法。

三，css vs xpath

• CSS对于简单的定位更加简介；
• CSS对于主流浏览器，效率更高；
• 对于复杂的定位，使用xpath更简洁；
• xpath基本上都能定位的到，功能更强大

四，xpath定位

1.xpath基本概念和语法（https://www.runoob.com/xpath/xpath-syntax.html）

节点名

• 非常广泛

从根节点开始选取，根节点是 /

• 绝对路径
• 路径很长，需要从根节点开始一级一级往下写，例如/html/head/title
• 从根节点开始往下查找，直到找到所有符合要求的节点

相对路径

• //是相对路径，会找出所有这个元素，然后再根据具体的元素属性定位一个
• 例如，//h2/a

选取当前节点

• 一个点指获取当前节点是 /.
• 两个点指选取上一级节点 /..，即父节点
• //是指从全文上下文中搜索//后面的节点，而.//则是指从前面的节点的子节点中进行查找

使用@选取属性

• 标签名[@属性名=“属性值”]
• 例如，//span[@class="js-label"]
• //a[@class]将所有带有class属性的a标签返回

contains包含关系

• 例如，//a[contains(@name,'trnews')]

使用text文本text()

• 例如，//span[contains(text(), "java测试")]
• //span[text()=" java测试"]（精准匹配）

多条件定位

• 当某个属性不足以唯一区别某一个元素时，可以采取多个条件组合的方式
• and（与）
• 例如，//input[@name and @class="s_ipt"]
• or（或）
• 例如，//input[@id="kw" or @id="su"]

层级定位

• 子标签不唯一，但父标签唯一，可以协助父标签一起定位
• 例如，//a[@title="Python"]/span[@class="js-label"]

通配符定位节点

• 例如，//*匹配所有节点
• 例如，//*[@id="su"]
• 匹配所有拥有属性节点的元素//*[@*]

轴定位（能够找到一个唯一的中心点）（参考文档：https://www.w3school.com.cn/xpath/xpath_axes.asp）

• 应用场景：当某个元素的各个属性及其组合都不足以定位时，可以利用其兄弟节点或者父节点等各种可以定位的元素进行定位。
• parent 父节点名
• ancestor 祖先节点，包含父节点
• preceding 当前元素节点之前的所有节点
• preceding-sibling 当前节点之前的兄弟节点（哥哥）
• following 当前节点结束标签之后的所有节点（儿子）
• following-sibiling 当前节点结束标签之后的兄弟节点，而不包含其他子节点（弟弟）
• 例如，//dd[@data="1992"]/following-sibling::dd[contains[@class, "batscore"]]/span

按照位置索引获取节点，获取同一个节点下面的所有同类型的子节点

• 从1开始，最后一个是last()
• //div[@data-report-module="middle-course"]/ul/li[1]
• //div[@data-report-module="middle-course"]/ul/li[last()]
• //div[@data-report-module="middle-course"]/ul/li[last()-1]
• //div[@data-report-module="middle-course"]/ul/li[position()>4]

五，CSS定位（参考文档：https://www.cnblogs.com/longronglang/p/9144661.html）

1，常见符号

• #表示 id选择器
• .表示 class选择器
• >表示子元素，层级
• 一个空格也表示子元素，但是是所有的后代子元素，相当于 xpath 中的相对路径

2，属性定位

百度输入框的的html代码，<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

• css可以通过元素的id、class、标签这三个常规属性直接定位到
• css用#号表示id属性,如：#kw
• css用.表示class属性，如：.s_ipt
• css直接用标签名称，无任何标示符，如：input

3，其他属性

1.css除了可以通过标签、class、id这三个常规属性定位外，也可以通过其它属性定位

2.以下是定位其它属性的格式
[name=wd] [autocomplete='off'][maxlength='255']

4，标签

css页可以通过标签与属性的组合来定位元素
input.s_ipt

input#kw

input[id='kw']

5，层级关系

//form的id属性
form#form>span>input
//form的class属性
form.fm>span>input

6，索引

css也可以通过索引nth-child(1)来定位子元素，直接翻译过来就是第几个小孩
总结：选择标签后，找第几个小孩即可
Select控件第三个Opel
#select>select>option:nth-child(3)
CheckBox第一个Volvo
#checkbox>input:nth-child(1)

7，逻辑运算

css同样也可以实现逻辑运算，同时匹配两个属性，这里跟xpath不一样，无需写and关键字
[type='checkbox'][name='checkbox1']

css语法远远不止上面提到的，还有更多更强大定位策略，有兴趣的同学可以继续深入研究