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

Posted 2021-03-04 墨小澄

一、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语法一样)

 1 # 依据css的class属性选择
 2 from selenium import webdriver
 3 wd = webdriver.Firefox(executable_path=r‘D:BrowserDrivergeckodriver.exe‘)
 4 wd.get(‘http://cdn1.python3.vip/files/selenium/sample1.html‘)
 5 elements = wd.find_elements_by_css_selector(‘.animal‘)
 6 for element in elements:
 7     print(element.text)
 8 wd.quit()
 9 
10 # 依据css的id属性选择
11 from selenium import webdriver
12 wd = webdriver.Firefox(executable_path=r‘D:BrowserDrivergeckodriver.exe‘)
13 wd.get(‘http://cdn1.python3.vip/files/selenium/sample1.html‘)
14 element = wd.find_element_by_css_selector(‘#searchtext‘)
15 element.send_keys(‘你好‘)
16 
17 # 直接子元素和后代元素
18 from selenium import webdriver
19 wd = webdriver.Firefox(executable_path=r‘D:BrowserDrivergeckodriver.exe‘)
20 wd.get(‘http://cdn1.python3.vip/files/selenium/sample1.html‘)
21 # 直接子元素的表示
22 element = wd.find_element_by_css_selector(‘#container > #layer1‘)
23 # 后代元素的表示
24 element1 = wd.find_elements_by_css_selector(‘div span‘)
25 element2 = wd.find_element_by_css_selector(‘#container #inner11‘)
26 for element1_1 in element1:
27     print(‘这个是后代元素‘, element1_1.text, ‘-‘*10)
28 print(element2.text)
29 print(‘这个是直接子元素的输出结果:
‘, element.text)
30 wd.quit()

　

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

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

 

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

　　

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

 

二、验证元素

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

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

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

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

 

三、结点选择

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