在HTML中, 节点有三种常见属性, 分别是id, name和class, 其中class是一个特殊的属性, 支持多个类名, 以空格隔开, 如下图所示:
class包含空格的元素
你是否注意到, 为什么selenium中的find_element_by_class_name, 是by_class_name而不是, by_class呢?
首先我们要区分class属性和class_name的区别, 节点的class属性可以包含多个class_name, 每个以空格隔开, 如上图, 该按钮实际上是一个链接, class属性值为"btn btn-primary my-2", 其中包含三个class_name, 分别为"btn", "btn-primary", "my-2", 通过在开发者工具中按Ctrl+F搜索,我们可以发现"btn-primary"这个class_name是唯一的. 我们可以使用它来定位.
定位方式有3种:
- 通过某个独特的class_name定位:
dr.find_element_by_class_name('btn-primary') - 使用xpath通过完整的class属性定位: dr.find_element_by_xpath('//a[@class="btn btn-primary my-2"]')
- 使用css selector, 通过某个属性或属性组合定位(推荐):
dr.find_element_by_css_selector('.btn-primary')或dr.find_element_by_css_selector('.btn-primary.my-2')
示例代码如下:
from selenium import webdriver
dr = webdriver.Chrome()
dr.get('http://qaschool.cn/')
# dr.find_element_by_class_name('btn-primary').click() # 通过某个class_name定位
# dr.find_element_by_xpath('//a[@class="btn btn-primary my-2"]').click() # 通过xpath结合完整的class属性定位
# dr.find_element_by_css_selector('.btn-primary').click() # 通过css selector结合某个class_name定位
dr.find_element_by_css_selector('.btn-primary.my-2').click() # 通过css selector结合多个class_name定位
