在selenium中,通过css语法定位元素也是常用的一种方式,所以我们先来了解下css语法。
css语法学习地址:https://www.w3school.com.cn/cssref/css_selectors.asp
css定位语法有很多,接下来我们介绍一些selenium中经常用到的。
先来张图,看下Xpath和CSS常用语法的对比
接下来逐个去试下,以下练习都是在百度首页上进行的。
css 基础语法
-
标签名
直接写即可 p html
-
id的值
#id_value
例如:id值为‘head’的div标签
-
class的值
.class1.class2--每个class值前都有一个‘点’
注:firefox对css的支持更好,搜索框能自动补齐
css高级语法
-
element element(标签+空格+标签)
例如:div p--选择div元素内的所有p标签(子孙节点)
等价于xpath中的//div//p
可以看到,找到了所有在div标签且class=‘title’的p标签,一共有42个
-
element>element
例如:div>p--div下的p(儿子节点)
等价于xpath中的//div/p
-
element+element
例如:span+input-->找到span紧挨着的兄弟节点input,注意!是紧挨着的兄弟节点,子节点不算
踩到的坑!:firefox里+号前后要加空格,chrome中不用,css本身也不用
-
[属性=属性值]
例如:[class='fm has-soutu']--找到含有class='fm has-soutu'的标签
等价于xpath中的[@class='fm has-soutu']
-
[属性=^属性值]
例如:[class^='fm has-s']--找到class属性值开头为'fm has-s'的标签
等价于xpath中的[starts-with(@class,'fm has-s')]
-
[属性*=属性值]
例如:[id*='aa']--找到id的属性值包含'aa'的所有标签
等价于xpath中的[contains(@属性名,'属性值')]
-
[属性$=属性值]
例如:[id$='aa']--找到id的属性值结尾是'aa'的所有标签
-
css中的下标
1):#form>input:nth-child(3)
id为form的标签下的第三个标签,且标签名为iput
如果是最后的3改为1,则会找不到结果,因为id为form的标签下的第1个标签不是imput,必须前后条件都满足。
2):#form>:nth-child(1)
id为form的标签下的第1个标签
另一种写法:form>:first-child
3):#form>:last-child
id为form的标签下的最后1个标签
4)#form>:nth-last-child(2)
id为form的标签下的倒数第2个标签
一个小实例
老规矩,自己想个需求练习下-->获取豆瓣音乐排行榜
步骤:
1.打开豆瓣首页
2.点击音乐按钮
可以看到,直接通过a标签+class值就可以获取到唯一值。
3.点击排行榜按钮
观察发现我们想要的标签上方不远处有个id属性,所以很简单就能得到定位方法
#db-nav-music li:nth-child(3)>a
4.获取歌曲名
先看下浏览器给的CSS选择器的方法,观察规律并对选择器进行精简
精简后得到
.col5 > li:nth-child(1) a:nth-child(1)
.col5 > li:nth-child(2) a:nth-child(1)
.col5 > li:nth-child(3) a:nth-child(1)
试了几个都可以准确定位到歌曲名称
ok,写代码
from selenium import webdriver
from time import sleep
driver = webdriver.Chrome()
url = 'https://www.douban.com/'#打开豆瓣官网
driver.get(url)
css1 = 'a.lnk-music'#音乐按钮位置
css2 = '#db-nav-music ul>li:nth-child(3)>a'#排行榜按钮位置
driver.find_element_by_css_selector(css1).click()#点击音乐按钮
a=driver.window_handles#返回一个window列表
#第一步点击音乐按钮,打开了新的window,所以要切换下
driver.switch_to.window(a[1])#切换到新打开的window
driver.find_element_by_css_selector(css2).click()#点击排行榜按钮
sleep(2)
for i in range(1,11):
css3 = f'.col5>li:nth-child({i}) a:nth-child(1)'
print(f'排行榜第{i}名:'+driver.find_element_by_css_selector(css3).text)
sleep(1)
运行结果:
排行榜第1名:say88
排行榜第2名:74-见一面吧-1500
排行榜第3名:四九城
排行榜第4名:Check It Out Y'All
排行榜第5名:theo's body without organism
排行榜第6名:而我的青春只有你(流行2000)
排行榜第7名:古镇
排行榜第8名:Ain't Got No Where to Go
排行榜第9名:NEW2
排行榜第10名:20210711-王子独归路
ok,需求完成。