Selenium定位class包含空格的元素-复合class节点

在HTML中, 节点有三种常见属性, 分别是id, name和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定位