自动化3-css选择器(Python)

一、CSS Selector选择元素

　　1、原理：HTML中为某些元素指定显示效果，会使用CSS来告诉浏览器选择哪些元素。

　　　　　　　——CSS Selector 语法就是用来选择元素的。

　　　　　　　　　　* 选择单个元素的方法：find_element_by_css_selector(CSS Selector参数)；　　

　　　　　　　　　　* 选择所有元素的方法：find_elements_by_css_selector(CSS Selector参数)；

　　2、依据tag、id、class选择元素(同css语法一样)

# 依据css的class属性选择
from selenium import webdriver
wd = webdriver.Firefox(executable_path=r'D:BrowserDrivergeckodriver.exe')
wd.get('http://cdn1.python3.vip/files/selenium/sample1.html')
elements = wd.find_elements_by_css_selector('.animal')
for element in elements:
    print(element.text)
wd.quit()

# 依据css的id属性选择
from selenium import webdriver
wd = webdriver.Firefox(executable_path=r'D:BrowserDrivergeckodriver.exe')
wd.get('http://cdn1.python3.vip/files/selenium/sample1.html')
element = wd.find_element_by_css_selector('#searchtext')
element.send_keys('你好')

# 直接子元素和后代元素
from selenium import webdriver
wd = webdriver.Firefox(executable_path=r'D:BrowserDrivergeckodriver.exe')
wd.get('http://cdn1.python3.vip/files/selenium/sample1.html')
# 直接子元素的表示
element = wd.find_element_by_css_selector('#container > #layer1')
# 后代元素的表示
element1 = wd.find_elements_by_css_selector('div span')
element2 = wd.find_element_by_css_selector('#container #inner11')
for element1_1 in element1:
    print('这个是后代元素', element1_1.text, '-'*10)
print(element2.text)
print('这个是直接子元素的输出结果:
', element.text)
wd.quit()

　

　【Tips】直接子元素和后代元素: 如果是一个树结构，二级节点就是直接子元素，二级以下的节点就是后代元素。

<div id='container'>
// layer是container的直接子元素，直接子元素彼此之间使用 “>” 表示关系
    <div id='layer1'>   
     // inner11是layer1的直接子元素； 
     // 是container的直接子元素也是后代元素，后代元素之间使用空格表示关系
           <div id='inner11'>
                 <span>内层</span>
           </div>
    </div>
</div>

　　3、css选择器支持通过任何属性来选择元素，语法是使用一个方括号 [ ]。

　　

from selenium import webdriver
wd = webdriver.Firefox(executable_path=r'D:BrowserDrivergeckodriver.exe')
wd.get('http://cdn1.python3.vip/files/selenium/sample1.html')
ele = wd.find_element_by_css_selector('[href="http://www.miitbeian.gov.cn"]')
ele1= wd.find_element_by_css_selector('[href]')
print(ele.get_attribute('outerHTML'))
# 不指定属性具体内容
ele1 = wd.find_element_by_css_selector('[href]')
# 也可以加标签限制
ele2 = wd.find_element_by_css_selector('div[id="inner11"]')
# 还可以选择 属性值 包含 某个字符串 的元素
ele3 = wd.find_element_by_css_selector('a[href*="miitbeian"]')
# 选择 属性值 一某个字符串结尾的元素div[class=misc][ctype=gun]
ele4 = wd.find_element_by_css_selector('a[href$="gov.cn"]')
# 可以指定 选择的元素要 勇士具有多个属性的限制，如
ele4 = wd.find_element_by_css_selector('a[href$="gov.cn"]')
print(ele1.get_attribute('outerHTML'))
print(ele2.text)
print('ele3=', ele3.text)
print('ele4=', ele4.text)
wd.quit()

二、验证元素

在浏览器中打开 开发者工具栏 验证，输入表达式，看能否选中元素行。

以Chrome为例，如果输入表达式，若是可以选择到元素，右边的红色方框里面会显示出类似 2 of 3 的内容。

of 后面的数字表示这样的表达式 共选择了几个元素；

of 前面的数字表示当前黄色高亮显示的 第几个元素； 

三、结点选择

from selenium import webdriver
wd = webdriver.Firefox(executable_path=r'D:BrowserDrivergeckodriver.exe')
wd.get('http://cdn1.python3.vip/files/selenium/sample1a.html')
# 组选择，用逗号进行选择
element = wd.find_element_by_css_selector('#t1,#t2')
element1 = wd.find_element_by_css_selector('div,#t1')
# 表示所有id为t1里面的span和p元素
element2 = wd.find_element_by_css_selector('#t1>span,#t1>p')
'''
按次序选择子节点：前面不加结点限制的话选择的是 所有位置的所有元素
    -父元素的第n个子节点：nth-child,(基于标签从上而下的排列位置进行参数选择的)
    -父元素的倒数第n个字节点：nth-last-child
    -父元素的第几个某类型的子节点：nth-of-type
    -父元素的倒数第几个某类型的子节点：nth-last-of-type
    -奇数结点和偶数节点：nth-child(odd)     nth-child(even)
    -父元素的某类型奇数结点和偶数节点：参上类推 nth-of-type(odd) nth-of-type(even)
    -相邻兄弟节点(同等级元素)选择：表示关系用 + 号
    -后续所有的兄弟节点选择： 表示用 ~ 号
'''
element3 = wd.find_elements_by_css_selector('p:nth-child(3)')
for element3_3 in element3:
    print('_'*5,element3_3.text,'*'*5)
element4=wd.find_element_by_css_selector('p:nth-last-of-type(1)')

print(element.text)
print('组选择的第二种表示：', element1.text)
print('组选择的第三种表示：', element2.text)
print(element4.text)
#print('父元素的第2个span元素结点：', element3.text)
wd.quit()