python+Selenium——web自动化(CSS选择器和Xpath选择器)

目录

css选择器定位元素

模糊匹配选择

按次序选择子节点

选择兄弟节点

XPath选择器

节点位置定位

属性选择

属性值包含字符串

按次序选择元素

组选择、父节点、兄弟节点

---

css选择器定位元素

定位方法与javascript中的相同:https://blog.csdn.net/JBY2020/article/details/109633720

模糊匹配选择

选择属性值包含某个字符串的元素：a[href*="beian"]  #选择a节点，里面的href属性包含了beian 字符串。

选择属性值以某个字符串开头的元素：a[href^="http"]  #选择a节点，里面的href属性以 http 开头。

选择属性值以某个字符串结尾的元素：a[href$=".cn"]  #选择a节点，里面的href属性以 .cn 结尾。

按次序选择子节点

:nth-child(n)：选择父元素的子节点（某个类型下次序为n的子节点），如选择标签名为span下的第二个子节点：span:nth-child(2)   当不加标签名时选择的是所有的第二个子节点的元素

:nth-last-child(n)：选择父元素的倒数第n个子节点，同上

:nth-of-type：父元素的第n个某种类型的子节点

:nth-last-of-type：父元素的倒数第n个某种类型的子节点

前两种是先限制父元素类型，后选择次序；后两种是先选择次序，后选择类型，后者使用居多。

:nth-child(even) :选择某父元素的偶数节点  （括号中even同时适用于以上四种）

:nth-child(odd):选择某元素的奇数节点  （odd同时适用前面四种）

选择兄弟节点

选择节点1后面紧跟的节点2,两个节点元素之间使用+，节点元素1 + 节点元素2

选择节点元素下所有某个相同属性的节点使用~，节点元素1 ~ 属性（节点元素2）

XPath选择器

节点位置定位

有些场景下使用CSS比较麻烦，而且CSS在有的环境中不能使用，如手机APP框架Appium中使用Xpath来选择元素，在爬虫框架Scrapy中两种选择器都能用到。

验证Xpath选择器检查查找元素的方法和CSS的一样，在浏览器中打开开发者工具栏，使用Ctrl+F在输入框中通过输入定位的表达式来检查。在python自动化代码中的表达式为.find_element_by_xpath()或.find_elements_by_xpath()

绝对路径选择：Xpath语法中，整个HTML文档的根节点用“/”表示，如果我们是从HTML中的第一个根节点下定位，表达式为/html/直接子节点1/直接子节点1的直接子节点2/......像这种的从html文档的第一个节点开始来定位元素属于绝对路径选择。

相对路径选择：如果定位的元素的比较深时，这种绝对路径使用起来比较麻烦，这时需要使用相对路径来定位，相对路径的使用”//”表示，它不需要从html文档的第一个节点开始定位，比如定位一个div（div不是文档的第一个子节点）下的非直接子节点p,表达式为  //div//p

Xpath中的”/”相当于CSS中的”>”,  ”//”相当于空格，同理，”/”与”//”也可以像CSS中的”>”和空格一样混合使用。

通配符使用：如果要定位某个节点如div下的所有直接子节点，表达式为//div/*,等价于CSS中的div > *

属性选择

Xpath中根据属性定位的表达式：[@属性名=’属性值’]

属性名前需要加@，属性值必须要用引号。

需要注意的是，对于属性值不止一个的元素，在CSS中可以在表达式中只写一个属性值，如定位元素class有两个属性值ass和box ,在CSS中定位的方法可以是[id=’ass  box’]    [id=’ass’]    [id=’box’]其中的一种，但在 Xpath中只能写成[@class=’ass  box’]

同样和CSS中的一样，如果要找页面中素有的某个属性，如需要查看所有具有style属性的节点，不管属性值，可以写成//*[@style]

属性值包含字符串

包含：如id属性值中包含color，表达式为//*[contains(@id,’color’)]

开头：如id属性值中以color开头，表达式为//*[starts-with(@id,’color’)]

结尾：如id属性值中以color结尾，表达式为//*[ends-with(@id,’color’)]，结尾的查找是Xpath2.0中的语法，Xpath1.0不支持。

按次序选择元素

Xpath按次序选择元素时比CSS简洁方便。

1. 如选择某个父节点下的第n个子节点元素 //父节点[n]，这里表示的父节点具有的类型下的第n个子元素，不是第n个子节点元素并且父节点为某种类型的元素。
2. 第n个子节点元素表达式：//*[n]
3. 倒数第几个元素：使用[last()]表示倒数元素的顺序，[last()]表示为倒数第一个元素，相当于-1，要想表示倒数第n+1个，在last()后面减n，如需要选择p节点下的倒数第3个元素，表达式为//p[last()-2]
4. 范围选择：Xpath中提供了根据节点次序范围选择元素的方法，关键词为[position()]。在positio()后面跟上限制范围的条件（使用< 、> 、=），如果后面没有范围条件，则表示[position()]前面限定节点标签的所有元素，如//p[position()]选择的元素为所有P标签元素，先当与[position()]并没有起到作用。要表示p类型中前n个元素，写法如下：//p[position()<=n]或//p[position()<n+1]。选择倒数后n+1个元素，写法如下：//p[position()>=last()-n]

组选择、父节点、兄弟节点

组选择

CSS中用”,”将多个不同类型隔开，Xpath中使用”|”隔开，如同时选择具有id属性和class属性的元素，CSS中为 [id],[class] ，用Xpath中为//*[@id] | //*[@class]

选择父节点

如果一个节点元素没有特征可以用来选择，那么我们可以用XPath选择器中通过子节点返回父节点的方法选择父节点。如在一个div中没有可以选择的特征，但在他的子节点下有p节点class属性值为col的元素，那么定位div的方法可以为 //p[@class=’col’]/..

当然如果一个节点下的节点也没有特征，同样可以使用 //p[@class=’col’]/../.. ，一个/..表示一层元素。

兄弟节点

选择后续兄弟节点，使用的语法：following-sibling:: ,如要选择id属性为acc的后续兄弟节点，可以写成//*[@id=’acc’]/following-sibling::*  (用通配符*表示所有的兄弟节点，也指定选择具体节点名的兄弟节点时，之需要将*换成具体的节点名)

选择前面的兄弟节点，使用的语法：preceding-sibling:: ,同样如上面的例子，将选择的兄弟节点改为前面的兄弟节点，表达式为//*[@preceding-sibling::*]  (选择前面的兄弟节点只有在Xpath中，CSS中没有这种选择方式)

Selement中用Xpath选择元素时需要注意的一点：如果我们对于一个元素的选择不是在一个表达式中，而是分步写的，如定位一个id为jiang下节点名为p的元素，那么我们写分步写出定位id的选择式，第一步jiang = wd.find_element_by_id(‘jiang’)         第二步p = jiang.find_element_by_xpath(‘//p’)  ，如果我们将选择结果打印出来，会发现这种写法在实际运行的时候，会选择所有的p节点元素，要解决的只需要在_xpath(‘//p’)中的//前加点号” .”  ，_xpath(‘.//p’) 。因为在第二步中我们要选择的对象是从Webelement中获取，而第一步中获取的对象是从Webdriver获取到的，所以在第二步中我们需要跳到Webelement中选择元素，加” .”就是跳到Webelemen中。