Selenium05-selenium中的Css元素定位方法

在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，需求完成。