Selenium 学习（2）之css表达式选择元素

本文链接：https://blog.csdn.net/tiffany_263/article/details/131325340

1、之前选择元素时根据id,class属性，tag名选择元素

如果我们要选择的元素没有id、class属性，或者有些我们不想选择的元素也有相同的id、class属性值，那么就可以使用css selector语法选择元素。

css的作用是告诉浏览器：选择哪些元素，来使用这样的显示风格。

比如下面狮子、老虎、山羊为什么能显示成红色呢？

白月黑羽测试网页1 (byhy.net)

原因是因为.animal选择animal类，将其color设置为red

我们可以借助find_element(By.CSS_NAME,'.plant')来找到class为plant的元素。

例如：要找到id=searchtext的元素。在css表达式中可以用#id来替代By.ID

如果''中有.（点），则是按照class搜索，如果‘’中有#，则是按照ID搜索，如果什么都没有，则是按照标签tag搜索。

前面讲的选择元素的方法不用也行，可以用css表达式替代。

2、选择子元素和后代元素

元素内部包含其他的元素，就像上图所示，<div id='container'>里面包含<div id=layer‘1'>和<div id='layer2'>的子元素，<div id=’layer1'>里又包含<div id=‘layer11'><div id=’layer12'>的两个子元素。

layer1和layer2的两个div元素，是container的直接子元素，也是后代子元素。

如果元素2是元素1的直接子元素，则CSS Selector 选择后代元素的语法：元素1>元素2
如果元素2是元素1的后代元素，则CSS Selector 选择后代元素的语法：元素1 元素2，中间要求一个或者多个空格隔开。最终选择的元素是元素2，并且要求这个元素2是元素1的后代元素。
也支持更多层级的选择，比如：元素1 元素2 元素3 元素4，最终选择的元素是元素4

举例：

找到container所有的直接子元素layer

elements=wd.find_elements(By.CSS_SELECTOR,'#container > div')

#container代表id=container，（空）div代表tag=div，这行代码的含义是找出id=container中，子元素tag为div的所有元素。

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

#创建一个Chrome浏览器的WebDriver实例对象，指明使用chrome浏览器驱动
wd=webdriver.Chrome()
wd.get('https://cdn2.byhy.net/files/selenium/sample1.html')
wd.implicitly_wait(1)


#用循环和抛出异常来确定程序休息的时间
elements=wd.find_elements(By.CSS_SELECTOR,'#container > div')

for element in elements:
    print(element.get_attribute('outerHTML'))


input()

结果如下：

css选择器可以根据任何属性来选择元素，比如 <a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>，tag为a中，href属性="http://www.miitbeian.gov.cn"，想要选择a元素，就可以使用[href="http://www.miitbeian.gov.cn"]。这个表达式的意思是，选择属性herf值为"http://www.miitbeian.gov.cn"的元素。

示例代码如下：

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

#创建一个Chrome浏览器的WebDriver实例对象，指明使用chrome浏览器驱动
wd=webdriver.Chrome()
wd.get('https://cdn2.byhy.net/files/selenium/sample1.html')
wd.implicitly_wait(1)


#用循环和抛出异常来确定程序休息的时间
elements=wd.find_elements(By.CSS_SELECTOR,'[href="http://www.miitbeian.gov.cn"]')

for element in elements:
    print(element.get_attribute('outerHTML'))


input()

上面的东西也可以组合使用

比如说‘.plant[name='SKnet']’代表class=plant,且name='SKnet'的所有元素

但是‘.plant [name='SKnet']代表class=plant下子元素name=‘SKnet’的所有元素

注意加不加空格含义不一样。

也可以更复杂的组合使用，比如#ok .plant > div[href=xxx]这代表id=ok的子元素class=plant的子子元素tag=div下所有href=xxx的所有元素。

3、选择元素之间的或关系

使用逗号

比如我们想选用所有class=plant和所有class=animal的元素

使用.plant,.animal。注意中间使用，分割。

注意逗号分隔符的优先级比较低，且不能使用（）来提高优先运算。

4、按次序选择子节点

测试网站：白月黑羽测试网页1b (byhy.net)

可以使用xxx:nth-child(n)来选择xxx且第几个子元素。

比如要选择tag=span且作为第二个子元素。

span:nth-child(2)

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

#创建一个Chrome浏览器的WebDriver实例对象，指明使用chrome浏览器驱动
wd=webdriver.Chrome()
wd.get('https://cdn2.byhy.net/files/selenium/sample1b.html')
wd.implicitly_wait(1)

elements=wd.find_elements(By.CSS_SELECTOR,'span:nth-child(2)')

for element in elements:
    print(element.get_attribute('outerHTML'))


input()

同理，也可以使用nth-last-child()来选择倒数第几个元素。

上面是选择tag=span且为第二个子元素的所有元素。

那么，如何选择tag=span的第1个元素呢？

可以使用span:nth-of-type(1),选择tag=span的第1个元素

这个代码的含义是选择所有tag=span下的第一个子元素

奇数节点和偶数节点：p：nth-child(even),p:nth-child(odd)

5、兄弟节点的选择

紧跟着的节点：h3+span

用加号来进行确定

import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service

#创建一个Chrome浏览器的WebDriver实例对象，指明使用chrome浏览器驱动
wd=webdriver.Chrome()
wd.get('https://cdn2.byhy.net/files/selenium/sample1b.html')
wd.implicitly_wait(1)

elements=wd.find_elements(By.CSS_SELECTOR,'h3+span')

for element in elements:
    print(element.get_attribute('outerHTML'))


input()

要选择h3之后所有的span：h3~span