Selenium定位元素Xpath和 CSS的特点对比，你更偏爱那种？

练习链接
http://cdn1.python3.vip/files/selenium/sample1.html
示例视频和讲解
https://www.bilibili.com/video/av64421994/?p=31&spm_id_from=pageDriver
原文Xpath文档
http://www.python3.vip/tut/auto/selenium/xpath_1/
测试页面
http://cdn1.python3.vip/files/selenium/sample1.html
http://cdn1.python3.vip/files/selenium/test1.html
以下是个人手抄整理点
1.xpath 绝对路径里

Xpath 里/html 表示根节点
/html/body/div 等价于 css html>body>div

2.Xpath可以根据属性来选择元素
[@属性名=‘属性值’]；注意前面有@，属性值必须用单引号或者双引号，
比如选择//*[@id=‘west’] (css表达式 *[id=‘west’])

3.xpath里class名有多个
//p[@class=“capital huge-city”] （在css里 可以单个表达，如 .capital）
//[@multiple]
4.Xpath和CSS以什么开头，包含什么，以什么结尾的不同
CSS属性值包含某个字符窜的元素，可以用css这种表达式选择a[href=“miitbeian”];Xpath 表达式 //[contains(@href,‘miitbeian’)]
要选择a节点，里面的href属性以http开头CSS里 a[href^=“http”];Xpath 表达式//[starts-with(@href,‘http’)],//[starts-with(@class,‘m’)]
要选择a节点，以gov.cn结尾 a[href$=‘gov.cn’];Xpath2.0 表达式 //[ends-with(@href,‘cn’)] Xpath1.0不支持，Chrome浏览器会报错

5.p29，Xpath里按次序选择
//p[2]选择的是 p类型第2个的子元素 ， 不是第2个子元素，并且是p类型，（相当于CSS p:nth-of-type(2)）
看链接“http://cdn1.python3.vip/files/selenium/test1.html”里Ctrl+F 搜索下，比较区别就知道了
//div//p[2] (等价于CSS div p:nth-of-type(2) )
假如我们就是想选择父元素为div的第2个子元素，不管是什么类型//div/[2] (等价于CSS div > :nth-child(2))
倒数第1个用Xpath //p[last()] 代表p类型的最后一个(等价于CSS p:nth-last-of-type(1))，倒数第2个Xpath用 //p[last()-1],倒数第三 -2
6.Xpath的范围选择，CSS做不到
选取option类型第1到2个子元素 //option[position()<=2]或者//option[position()< 3],选取前2个元素
选取后2个，//[@class=‘multi_choice’]//option[position()>=last()-1]

7.Xpath 组合选择，用|分开
比如要选择所有的option元素和所有的h4元素，可以使用 //option|//h4（等价于CSS option,h4）
8.Xpath可以选择父节点，这是CSS做不到
比如//div[@id=“china”]/…是选取这个元素//div[@id=“china”]的父节点，继续父节点就再加/…,/div[@id=“china”]/…/…
9.Xpath兄弟节点选择
following-sibling::,如选择后面的所有兄弟节点
//[@class=‘single_choice’]/following-sibling::(等同于.single_choice~)
假如要选择后面的select类，直接加//[@class=‘single_choice’]/following-sibling::select，在前的用preceding-sibling 如//*[@class=‘multi_choice’]/preceding-sibling::*前面的所有兄弟节点

在CSS里 这就是一种 相邻兄弟 关系，可以这样写 h3 + span
表示元素 紧跟关系的 是 加号
h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span
练习链接：
http://cdn1.python3.vip/files/selenium/sample1a.html
//h3/following-sibling:😗 h3~*

10.xpath同时满足二个条件 and
//p[@id=‘beijing’ and @class=‘capital huge-city’]

//input[contains(@id, ‘auto-id’) and @name=‘email’ ]
部分代码

from selenium import webdriver
wd=webdriver.Chrome()
url='http://cdn1.python3.vip/files/selenium/test1.html'
wd.get(url)
eles=wd.find_elements_by_xpath('/html/body/div')
for ele in eles:#当成多个小的元素处理
    print('--'*30)
    print(ele.text)

‘’’

eles=wd.find_element_by_xpath('/html/body/div')
print(eles.text) #把它当成单个大的元素

‘’’

# Xpath的坑
# CSS #china>p  Xpath //div[@id='china']/p
china=wd.find_element_by_id('china')
# elements=china.find_elements_by_xpath('.//p')#从上面的对象china里找元素，一定要加.代表从返回的对象内部查找，如果不加点是从全部网页里找，不加点相当于从webdriver里查找
# for ele in elements:
#     print('-'*30)
#     print(ele.get_attribute('outerHTML'))
#验证一下，CSS没有这个问题
elements=china.find_elements_by_css_selector('p')#从上面的对象china里找元素，一定要加.代表从返回的对象内部查找，如果不加点是从全部网页里找，不加点相当于从webdriver里查找
# elements=china.find_elements_by_tag_name('p')
for ele in elements:
    print('-'*30)
    print(ele.get_attribute('outerHTML'))
wd.quit()

CSS代码

#-*- codeing=utf-8 -*-
#@Author:Ones
#@File:csschose.py
#@Software:PyCharm

from selenium import webdriver
wd=webdriver.Chrome()
wd.implicitly_wait(5)
"""
url="http://cdn1.python3.vip/files/selenium/sample1.html"
wd.get(url)
# ele=wd.find_elements_by_css_selector('.plant  span')
# ele=wd.find_elements_by_css_selector('body > div:nth-child(2) > span')
#id 用#缩写，classname 用.,>直接下级，包含关系可以用空格直接表示 ele=wd.find_element_by_css_selector('#container  #inner11')
# ele=wd.find_element_by_css_selector('div[class="footer1"]') #也可以直接用 .footer1,但是不能直接[.footer1]
ele=wd.find_elements_by_css_selector('.plant , .animal') #选择条件满足 classname 是plant 或者.animal
#div[class='SKnet']表示标签为div class名为SKnet
# 根据属性值 href
# for el in ele:
#     print(el.get_attribute('outerHTML'))
#     print(el.get_attribute("innerHTML"))
"""
"""
#示例子2，选中所有作者和作品,或用逗号“，”表示
url="http://cdn1.python3.vip/files/selenium/sample1b.html"
wd.get(url)
ele=wd.find_elements_by_css_selector("span , p")#选中所有作者和作品
for el in ele:
    print(el.get_attribute("outerHTML"))
wd.quit()
"""

#示例子3，唐诗宋词第二个子元素:nth-child(2),# 最后一首唐诗宋词p:nth-last-child(1)
# 第一个span类型的子元素span:nth-of-type(1),倒数第一个span类型span:nth-last-of-type(1)
#奇数偶数节点，如果要选择的是父元素的 某类型偶数节点，使用 nth-of-type(even)，如果要选择的是父元素的 某类型奇数节点，使用 nth-of-type(odd)

url="http://cdn1.python3.vip/files/selenium/sample1b.html"
wd.get(url)
ele=wd.find_elements_by_css_selector("div span:nth-child(2)")#选中所有作者和作品
for el in ele:
    print(el.get_attribute("outerHTML"))
    # print(el)
wd.quit()

#示例4，相邻兄弟节点用+表示，如h3+span
# 如果要选择是 选择 h3 后面所有的兄弟节点 span，可以这样写 h3 ~ span
#Css选择器参考手册链接 https://www.w3school.com.cn/cssref/css_selectors.asp

css参考链接
http://www.python3.vip/tut/auto/selenium/css_1/
CSS 选择器参考手册
https://www.w3school.com.cn/cssref/css_selectors.asp