一、哪些情况不能用ID选择器

・元素的ID不唯一，或者ID是动态变化的
・name以及linktext属性值不唯一
如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了
PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是否唯一，在前两篇已经详细说过——方式二如何查看匹配节点）

二、CSS选择器语法

tag[attribute=‘value’]
标签名[属性=‘值’]
在CSS里，#代表ID，.代表class

★ID选择器查找元素

举个栗子
我们写一下慕课网登录的CSS定位，有三种写法
1）按语法规则输入：a[id=‘js-signin-btn’]，可以看到黄色高亮显示，说明CSS选择器是可以用的，显示一个匹配的节点

ID选择器查找元素1

2）在CSS语法中，#代表id，所以我们查找的属性时id的话，可以忽略语法，使用简写：#js-signin-btn，可以看到DOM里也是黄色背景高亮

ID选择器查找元素2

3）最后一种写法：a#js-signin-btn,把标签的名字加在了最前面，什么情况写需要加标签呢？如果这个页面有多个标签都有同一个id（一般不会出现这种情况），这种情况下，加上标签名，直接会查找到某个标签下的id,可以使搜索速度更快

ID选择器查找元素3

★class选择器查找元素

举个栗子
我们写一下慕课网购物车的CSS定位
1）按语法规则输入：span[class=‘icon-shopping-cart’]，只输入了一个class，但是没有查找到元素；为什么呢？是因为在单引号里class要完全匹配

class选择器查找元素1-1

现在改一下class值，输入完整的class：span[class=‘icon-shopping-cart js-endcart’]，查找出来唯一的元素

class选择器查找元素1-2

2）购物车元素的class有两个，我们先写icon-shopping-cart，使用.代替class，使用简写：.icon-shopping-cart，可以看到查找出三个元素，此时查找的元素是不唯一的，运行时会报错

class选择器查找元素2

3）写js-endcart，输入.js-endcart，查找出来一个元素，是唯一的

class选择器查找元素3

4）加上标签名，可以看到元素是在span这个标签里的，所以输入span.js-endcart，查找出来一个元素，是唯一的

class选择器查找元素4-1

追加class(.class1.class2.class3—)直到找到唯一的元素
输入.icon-shopping-cart.js-endcart

class选择器查找元素4-2

★通配符定位

语法：标签【属性 通配符=‘值’】
“^”代表以什么文本开始
“$”代表以什么文本结束
“*”代表包含什么文本

1）输入div[class^=‘search’],可以查找到div标签下所有以search开头的class属性的元素

通配符定位1

2）输入div[class$=‘area’],可以查找到div标签下所有以area结尾的class属性的元素

通配符定位2

3）标签名[属性名=属性值]，如：find_element_by_css_selector("input[autocomplete='off']")
输入a[title*=‘页’],可以查找到a标签下所有包含页的title属性的元素

通配符定位3

★查找子节点

：通过找到父节点标签来定位子标签，不包括孙标签
父节点>.class属性值（id属性用#）

查找子节点

・逗号，代表谁和谁

逗号，代表谁和谁

・空格，代表所有的后代标签

空格，代表所有的后代标签

💛属性中带空格怎么筛选？
xpath中class带空格直接写空格，css中用.点代替

属性中带空格的筛选

三、Xpath定位方式

★xpath语法

语法：//tag[@attibute=‘value’]

★绝对路径

xpath绝对路径用单斜线“/”表示

★相对路径

xpath 相对路径用双斜线“//”表示

★“/”和“//”的区别

“/”：元素是上一级节点的子节点中的一个，不能跳级
“//”：下级任何子节点或者任何嵌套子节点中的一个，可以跳级
路径里不能用“*”，要写标签名

★用元素的text文本属性

语法：//a[text()=‘忘记密码’]

用元素的text文本属性

★用contains关键字构建有效的xpath

语法：//tag[contains(attribute,‘value’)]

用[contains]

★starts-with关键字构建有效的xpath

语法：//tag[starts-with(attribute,‘value’)]

starts-with关键字

★ends-with

匹配以xx结尾的属性值
例如：
//input[ends-with(@class,"-special")]

★使用逻辑运算符--and , or

例如：
//input[@name="phone" and @datatype="m"]

★如何查找父节点和平级节点

父节点：xpath-to-some-element//parent::<标签名>
前面平级节点：xpath-to-some-element//preceding-sibing::<标签名>
后面平级节点：xpath-to-some-element//followinging-sibing::<标签名>

四、

CSS和xpath定位不同的是，标签名前不用// ，[ ]内的属性名前不用@符号，而xpath则需要。其余的规则与xpath相同

——————————————————————————————
版权声明：本文为CSDN博主「Lefdr」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/LSMSMD0526/article/details/118971176
https://blog.csdn.net/LSMSMD0526/article/details/119065078